前端vue-实现富文本组件

1.使用wangeditor富文本编辑器
工具网站：https://www.wangeditor.com/v4/
下载安装下令：npm i wangeditor --save
制品如下图：

组件实现代码

1. <template>
2.   <div>
3.     <!-- 富文本编辑器 -->
4.     <div id="wangeditor">
5.     </div>
6.   </div>
7. </template>
8. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
9. <script>
11. import { uploadImage } from '@/api/api'; // 导入图片上传api
12. import E from 'wangeditor';
15. export default {
16.   name: 'richText',
17.   components: {
18.   },
19.   props: {
20.     defaultDetails: {
21.       default: '请填写内容',
22.       type: String,
23.     },
24.   },
25.   watch: {
26.     htmlContent(val) {
27.       this.$emit('change', val); // 将改变同步到父组件
28.       if (this.validateEvent) {
29.         this.dispatch('ElFormItem', 'el.form.change', [val]);
30.       }
31.     }
32.   },
33.   data() {
34.     return {
35.       editor: null,
36.       htmlContent: '<p>hello</p>',
37.       firtherMethod: 'loadingCompleted', // 回调父组件，通知editor已经创建完成
38.     };
39.   },
40.   methods: {
41.     // 获取text文本
42.     getText() {
43.       const text = this.editor.txt.text();
44.       console.log('text = ', text);
45.       return text;
46.     },
47.     // 获取html
48.     getHtml() {
49.       const html = this.editor.txt.html();
50.       console.log('thml = ', html);
51.       return html;
52.     },
53.     // 图片上传自定义实现
54.     async uploadImage(files) {
55.       const file = files[0];
56.       console.log('Fuedit2-uploadImage file = ', file);
57.       const res = await uploadImage(obj);
58.       const path = SOCKET + (res.path || {});
59.       console.log('完整path = ', path);
60.       return path;
61.     },
62.     // 设置内容
63.     setHtml(html) {
64.       this.editor.txt.html(html);// 重新设置编辑器内容
65.     },
66.     // 追加内容
67.     appentHtml(html) {
68.       this.editor.txt.append(html);// 继续追加内容。
69.     },
70.     // 销毁编辑器
71.     beforeDestroy() {
72.       // 销毁编辑器
73.       console.log('销毁前');
74.       this.editor.destroy()
75.       console.log('销毁后');
76.       this.editor = null
77.     },
78.     // 清空编辑器内容
79.     clearText() {
80.       this.editor.txt.clear();
81.     },
83.     createEditor() {
84.       if(this.editor !== null) {
85.         return;
86.       }
88.       this.editor = new E('#wangeditor');
89.       // 或者 const editor = new E( document.getElementById('div1') )
90.       this.editor.config.height = 200; // 设置高度
92.       // 内容发生改变时回调
93.       // this.editor.config.onchange = function (html) {
94.         // this.htmlContent = html;
95.       // }
97.       this.editor.config.placeholder = this.defaultDetails; // 自定义初始文字提示
99.       this.editor.config.focus = false;// 取消初始化时自动聚焦
101.       this.editor.config.menus = [ // 定义显示哪些菜单和菜单的顺序。
102.         'head', // 标题
103.         'bold', // 粗体
104.         'fontSize', // 字号
105.         'fontName', // 字体
106.         'italic', // 斜体
107.         'underline', // 下划线
108.         // 'strikeThrough', // 删除线
109.         // 'indent',
110.         'lineHeight',
111.         'foreColor', // 文字颜色
112.         'backColor', // 背景颜色
113.         'link', // 插入链接
114.         'list', // 列表
115.         // 'todo',
116.         // 'justify', // 对齐方式
117.         // 'quote', // 引用
118.         // 'emoticon', // 表情
119.         'image', // 插入图片
120.         // 'table', // 表格
121.         // 'video', // 插入视频
122.         // 'code', // 插入代码
123.         'splitLine',
124.         'undo', // 撤销
125.         'redo', // 重复
126.       ];
128.       // this.editor.config.uploadImgServer = '/upload-img'; // 配置上传server 接口地址
129.       this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 图片上传max
130.       this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']; // 图片上传类型
131.       this.editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
133.       this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) { // 自定义图片上传实现
134.       // resultFiles 是 input 中选中的文件列表；insertImgFn 是获取图片 url 后，插入到编辑器的方法
135.         const file = resultFiles[0];
136.         const path = await uploadImage(file);//返回图片地址
137.         console.log('完整path = ', path);
138.       // 上传图片，返回结果，将图片插入到编辑器中
139.         insertImgFn(path);
140.       }
142.       // 使用base64格式保存本地图片，不可与uploadImgServer同时使用
143.       // this.editor.config.uploadImgShowBase64 = true;
145.       this.editor.create();
147.       // this.editor.txt.html('<p>用 JS 设置的内容</p>');// 重新设置编辑器内容
148.       // 第一步，初始化 textarea 的值
149.       // text1.val(this.editor.txt.html())
150.       console.log('this.editor = ', this.editor);
151.       // this.editor.txt.append('<p>追加的内容</p>');// 继续追加内容。
153.       // 创建完成，回调父组件
154.       try {
155.         this.$emit(this.firtherMethod, null);
156.       } catch (error) {
157.         console.log('editor 完成，回调父组件失败 error = ', error);
158.       }
159.     },
160.   },
161.   mounted() {
162.     this.createEditor();
163.   },
164. };
165. </script>
167. <style lang="css"  src="">
168. /* @import '../css/Cnel.css';
170. /* 使用style属性src引入外部css，仅在当前s组件有效 */
171. </style>

复制代码

组件使用方式

1. RichText: () => import('@/components/RichText.vue'),
11. <rich-text v-model="details" ref="fueditModule" @loadingCompleted="loadingCompleted"></rich-text>
13. export default Vue.extend({
14.   name: 'UpdateText',
15.   components: {
16.     RichText: () => import('@/components/RichText.vue'),
17.   },
18.   methods: {
19.           // 富文本组件加载完成回调
20.     loadingCompleted() {
21.       try {
22.         console.log('editor加载完成，回调父组件');
23.         // this.details = this.$refs.fueditModule.setHtml('<p><b>招商会详情！！</b></p>');
24.       } catch (error) {
25.         console.log('打开弹窗 err =', error);
26.       }
27.     },
28.         // 调用子组件获取富文本内容
29.         this.details = this.$refs.fueditModule.getHtml();
30.         // 调用子组件设置富文本内容
31.         this.$refs.fueditModule.setHtml('<p><b>设置详情！！</b></p>');
32.         // 调用子组件销毁富文本编辑框
33.         this.$refs.fueditModule.beforeDestroy();
34.   }
35. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。