在vue中使⽤wangEditor富⽂本编辑器1.安装wangEditor
npm install wangeditor
2.创建公共组件
在components中创建wangEnduit⽂件夹
3.编写index.vue组件
01. <template lang="html">
02.  <div class="editor">
03.    <div ref="toolbar"class="toolbar">
04.    </div>
05.    <div ref="editor"class="text">
06.    </div>
07.  </div>
08. </template>
09.
10. <script>
11. import E from 'wangeditor'
12. import'wangeditor/release/wangEditor.min.css'
13. export default {
14.    name: 'editoritem',
15.    data() {
16. return {
17. // uploadPath,
18.        editor: null,
19.        info_: null
20.      }
21.    },
22.    model: {
23.      prop: 'value',
24.      event: 'change'
25.    },
26.    props: {
27.      value: {
28.        type: String,
29. default: ''
30.      },
31.      isClear: {
32.        type: Boolean,
33. default: false
34.      }图片编辑器app
35.    },
36.    watch: {
37.      isClear(val) {
38. // 触发清除⽂本域内容
39. if (val) {
40. lear()
41. this.info_ = null
42.        }
43.      },
44.      value: function(value) {
45. if (value !== html()) {
46. html(this.value)
47.        }
48.      }
49. //value为编辑框输⼊的内容，这⾥我监听了⼀下值，当⽗组件调⽤得时候，如果给value赋值了，⼦组件将会显⽰⽗组件赋给的值
50.    },
51.    mounted() {
52. this.seteditor()
53. html(this.value)
54.    },
55.    methods: {
56.      seteditor() {
57. this.editor = new E(this.$lbar, this.$refs.editor)
58. this.editor.customConfig.uploadImgShowBase64 = false// base 64 存储图⽚
59. this.editor.customConfig.uploadImgServer = ''// 填写配置服务器端地址
60. this.editor.customConfig.uploadImgHeaders = { }// ⾃定义 header
61. this.editor.customConfig.uploadFileName = 'file'// 后端接受上传⽂件的参数名
62. this.editor.customConfig.uploadImgParams = {
63. // 如果版本 <=v3.1.0 ，属性值会⾃动进⾏ encode ，此处⽆需 encode
64. // 如果版本 >=v3.1.1 ，属性值不会⾃动 encode ，如有需要⾃⼰⼿动 encode
65.            file_type: 'img'
66.        }
67. this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图⽚⼤⼩限制为 2M
68. this.editor.customConfig.uploadImgMaxLength = 6 // 限制⼀次最多上传 6 张图⽚
69. this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
70. // ⾃定义 onchange 触发的延迟时间，默认为 200 ms
71. // this.hangeTimeout = 1000 // 单位 ms
72. // 隐藏�⽹络图⽚�tab
73. // this.editor.customConfig.showLinkImg = false
74. // 表情⾯板可以有多个 tab ，因此要配置成⼀个数组。数组每个元素代表⼀个 tab 的配置
75. // this.ions = [
76. //    {
77. //        // tab 的标题
78. //        title: '默认',
79. //        // type -> 'emoji' / 'image'
80. //        type: 'image',
81. //        // content -> 数组
82. //        content: [
83. //            {
84. //                alt: '[坏笑]',
85. //                src: 'sinajs/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
86. //            },
87. //            {
88. //                alt: '[舔屏]',
89. //                src: 'sinajs/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
90. //            },
91. //            {
92. //                alt: "[哈哈]",
93. //                src: "sinajs/t4/appstyle/expression/ext/normal/8f/2018new_haha_org.png",
94. //            },
95. //            {
96. //                src : "sinajs/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
97. //                alt : "[]"
98. //            }
99. //        ]
100. //    },
101. //    {
102. //        // tab 的标题
103. //        title: 'emoji',
104. //        // type -> 'emoji' / 'image'
105. //        type: 'emoji',
106. //        // content -> 数组
107. //        content: [' ', ' ', ' ', ' ', ' ']
108. //    }
109. // ],
110. // 配置菜单
111. this.us = [
112. 'head', // 标题
113. 'bold', // 粗体
114. 'fontSize', // 字号
115. 'fontName', // 字体
116. 'italic', // 斜体
117. 'underline', // 下划线
118. 'strikeThrough', // 删除线
119. 'foreColor', // ⽂字颜⾊
120. 'backColor', // 背景颜⾊
121. 'link', // 插⼊链接
122. 'list', // 列表
123. 'justify', // 对齐⽅式
124. 'quote', // 引⽤
125. 'emoticon', // 表情
126. 'image', // 插⼊图⽚
127. 'table', // 表格
128. 'video', // 插⼊视频
129. 'code', // 插⼊代码
130. 'undo', // 撤销
131. 'redo', // 重复
132. 'fullscreen'// 全屏
133.        ]
134.
135. this.editor.customConfig.uploadImgHooks = {
136.          fail: (xhr, editor, result) => {
137. // 插⼊图⽚失败回调
138.          },
139.          success: (xhr, editor, result) => {
140. // 图⽚上传成功回调
141.          },
142.          timeout: (xhr, editor) => {
143. // ⽹络超时的回调
144.          },
145.          error: (xhr, editor) => {
146. // 图⽚上传错误的回调
147.          },
148.          customInsert: (insertImg, result, editor) => {
149. // 图⽚上传成功，插⼊图⽚的回调
150. //result为上传图⽚成功的时候返回的数据，这⾥我打印了⼀下发现后台返回的是data：[{url:"路径的形式"},...] 151. // console.log(result.data[0].url)
152. //insertImg()为插⼊图⽚的函数
153. //循环插⼊图⽚
154. // for (let i = 0; i < 1; i++) {
155. if (de == 200) {
156.                let url = result.data.image_url
157.                JSON.stringify(url)
158.                insertImg(url)
159.            } else {
160. this.$(result.msg);
161.            }
162. // }
163.          }
164.        }
165. this.hange = (html) => {
166. this.info_ = html // 绑定当前逐渐地值
167. this.$emit('change', this.info_) // 将内容同步到⽗组件中
168.        }
169. // 创建富⽂本编辑器
170. ate()
171.      }
172.    }
173.  }
174. </script>
175.
176. <style lang="css">
177.  .editor {
178.    width: 100%;
179.    margin: 0 auto;
180.    position: relative;
181.    z-index: 0;
182.  }
183.  .toolbar {
184.    border: 1px solid #ccc;
185.  }
186.  .text {
187.    border: 1px solid #ccc;
188.    min-height: 500px;
189.  }
190. </style>
4.调⽤组件的内容
01. <template>
02. <div>
03.    <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
04. </div>
05. </template>
06. <script>
07. import EditorBar from '../../components/wangEnduit'
08. export default {
09.    components: { EditorBar },
10.    data() {
11. return {
12.            test:'',
13.            isClear: false,
14.            detail:""
15.        }
16.      },
17.    methods: {
18.        change(val) {
19.            console.log(val)
20.        },
21.    }
22. }
23. </script>
5.效果图