vue前端富文本框利用（wangeditor富文本框）

        前端开发离不开富文本，尤其是在后台管理系统开发中更少不了富文本的利用，现在插件市场上有许多富文本框，功能也是万花齐放，今天就简朴先容一个能满足大部门需求的富文本编辑器===》wangeditor富文本编辑器，起首就是它功能能满足日常利用需求，而且也比较简朴，接下来简朴先容一下利用方法：
第一步：利用node引入wangeditor富文本编辑器插件

• npm install wangeditor
  

第二步：创建富文本编辑器组件；我们自己在二次封装一下该组件方便利用
        a.在组件components内定义文件QuillEditor.vue文件
        b.QuillEditor.vue文件代码

1. <template>
2.   <div class="quillEditor">
3.       <Toolbar
4.         class="toolbar-style"
5.         :editor="editorRef"
6.         :defaultConfig="toolbarConfig"
7.         :mode="mode"
8.       />
9.       <Editor
10.         class="editor-style"
11.         v-model="valueHtml"
12.         :defaultConfig="editorConfig"
13.         :mode="mode"
14.         @onCreated="handleCreated"
15.         @vnode-updated="getData"
16.       />
17.   </div>
18. </template>
19. <script>
20. import '@wangeditor/editor/dist/css/style.css' //引入富文本插件全局样式
21. import { onBeforeUnmount, ref, shallowRef } from 'vue' //引入vue3组件内容
22. import { Editor, Toolbar } from '@wangeditor/editor-for-vue' //引入富文本组件
23. import request from '@/http/request' //引入的全局的请求axios，引入这个主要是在富文本内插入图片以及视频时使用
24. import { ElMessage } from 'element-plus' //消息提示组件，也可以自己定义，主要是错误提示时使用
25. export default {
26. components: { Editor, Toolbar },
27. props: {
28.   content: {
29.     type: String,
30.     default: ""   //富文本的内容输入
31.   }
32. },
34. //监听父组件传来的内容，主要是富文本内容回显（注意，这儿传入的内容必须是html格式，不然富文本识别不了）
35. watch: {
36.   content: {
37.       handler(value) {
38.         this.valueHtml = value;
39.       },
40.       deep: true,
41.       immediate:true
42.   }
43. },
44. setup() {
45.   // 编辑器实例，必须用 shallowRef
46.   const editorRef = shallowRef()
48.   // 内容 HTML
49.   const valueHtml = ref("")
51.   //工具栏配置项，具体配置可去官网查看详细
52.   const toolbarConfig = {
54.   }
56.   //编辑框配置项
57.   const editorConfig = {
58.     placeholder: '请输入正文...',
59.     readOnly: false, //设置只读模式
60.     scroll: true, //是否支持滑动
61.     maxLength: 20000,
62.     MENU_CONF: {}
63.   }
66.   //自定义图片上传（这个上传文件接口是我自己写的，上传成功后会返回一个文件地址url作为内容回显）
67.   editorConfig.MENU_CONF['uploadImage'] = {
68.     async customUpload(file, insertFn) {
69.       request("/api/sys/uploadFile","POST",{"file":file},{'Content-Type':'multipart/form-data'}).then(res=>{
70.         if(res.data.status==="ok") {
71.           const alt = ""; //图片介绍
72.           const href = ""; //图片链接
73.           insertFn(res.data.data, alt, href) //文件URL回显在富文本内方法
74.         }else {
75.           //错误消息提示，可自定
76.           ElMessage({
77.             type: "error",
78.             message: res.data.data
79.           })
80.         }
81.       })
82.      }  
83.   }
85.   //自定义视频上传（这个上传文件接口是我自己写的，上传成功后会返回一个文件地址url作为内容回显）
86.   editorConfig.MENU_CONF['uploadVideo'] = {
87.     async customUpload(file, insertFn) {  
88.       request("/api/sys/uploadFile","POST",{"file":file},{'Content-Type':'multipart/form-data'}).then(res=>{
89.         if(res.data.status==="ok") {
90.           const poster = ""; //视频封面链接
91.           insertFn(res.data.data, poster) //文件URL回显在富文本内方法
92.         }else {
93.           //错误消息提示，可自定
94.           ElMessage({
95.             type: "error",
96.             message: res.data.data
97.           })
98.         }
99.       })
100.     }
101.   }
103.   // 组件销毁时，也及时销毁编辑器
104.   onBeforeUnmount(() => {
105.       const editor = editorRef.value;
106.       if (editor == null) return;
107.       editor.destroy();
108.   })
110.   const handleCreated = (editor) => {
111.     editorRef.value = editor // 记录 editor 实例，重要！
112.   }
114.   return {
115.     editorRef,
116.     valueHtml,
117.     mode: 'default', // 或 'simple'
118.     toolbarConfig,
119.     editorConfig,
120.     handleCreated
121.   };
122. },methods: {
124.     //获取数据且向父组件传值
125.     getData() {
126.       this.$emit("contentData",this.valueHtml)
127.     }
128.   }
129. }
130. </script>
131. <style lang="scss">
132. .quillEditor {
133.   width: 600px;
134.   border: 1px solid #ccc !important;
136. .toolbar-style {
137.   border-bottom: 1px solid #ccc !important;
138.   }
140. .editor-style {
141.   height: 400px !important;
142.   overflow-y: hidden !important;
143.   }
144. }
145. </style>

复制代码

第三步：页面利用；可以直接在要利用页面引入该组件或者全局注册该组件
下面是我直接在页面中引入方法利用：

1. <template>
2.     <div>
3.         <quillEditor :content="textContent" @contentData="getPrivacyAgreement"/>
4.     </div>
5. </template>
6. <script>
7. import QuillEditor from '@/components/QuillEditor.vue'
8. export default {
9.     components: {UploadImg,QuillEditor},
10.     data() {
11.         return {
12.             textContent: "", //传入子组件回显内容，必须是html格式内容
13.             
14.         }
15.     },methods: {
16.         
17.         //富文本内容输出
18.        getPrivacyAgreement(val) {
19.             console.log(val)
20.         }
22.     }
24. }
25. </script>

复制代码

利用结果：

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