在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. }
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. }asp富文本编辑器
16. },
17. methods: {
18. change(val) {
19. console.log(val)
20. },
21. }
22. }
23. </script>
5.效果图
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论