vue wangeditor富文本编辑器使用

文章列表

先安装

npm install wangeditor

代码参考：

MyEditor.vue

<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><!-- 工具栏 --><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /><!-- 编辑器 --><Editor style="height: 175px; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html" @onChange="onChange"@onCreated="onCreated" /></div></div>
</template><script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {name: "MyEditor",components: { Editor, Toolbar },props: {wangType:'',aaaId: '',bbbId: '',},data() {return {editor: null,html: "",content: {type: String,default: '',},toolbarConfig: {/* 显示哪些菜单，如何排序、分组 */toolbarKeys: ["headerSelect","blockquote","codeBlock","|","bold","underline","italic",{key: "group-more-style",title: "更多",iconSvg: "<svg viewBox=\\"0 0 1024 1024\\">" +"<path d=\\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\\"></path>" +"<path d=\\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\\"></path>" +"<path d=\\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\\"></path>" +"</svg>",menuKeys: ["through", "code", "sup", "sub", "clearStyle"]},"color","bgColor","|","fontSize","fontFamily","lineHeight","|","bulletedList","numberedList","todo",{key: "group-justify",iconSvg: "<svg viewBox=\\"0 0 1024 1024\\"><path d=\\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\\"></path></svg>",title: "对齐",menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"]},{key: "group-indent",title: "缩进",iconSvg: "<svg viewBox=\\"0 0 1024 1024\\"><path d=\\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\\"></path></svg>",menuKeys: ["indent", "delIndent"]},"|","emotion",// "insertLink",{key: "group-image",title: "图片",iconSvg: "<svg viewBox=\\"0 0 1024 1024\\"><path d=\\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\\"></path></svg>",menuKeys: ["uploadImage"]// menuKeys: ["insertImage", "uploadImage"]},// {//   key: "group-video",//   title: "视频",//   iconSvg: "<svg viewBox=\\"0 0 1024 1024\\"><path d=\\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\\"></path></svg>",//   menuKeys: ["insertVideo", "uploadVideo"]// },"insertTable","divider","|","undo","redo","|","fullScreen"]// excludeKeys: [ ], /* 隐藏哪些菜单 */ },editorConfig: {placeholder: "",// autoFocus: false,readOnly: false, // true只读、不可编辑// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {uploadImage: {// 后端上传地址，必填server: this.$store.state.updataurl,// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image// fieldName: "file",// 1M，单个文件的最大体积限制，默认为 2MmaxFileSize: 1 * 1024 * 1024,// 最多可上传几个文件，默认为 100maxNumberOfFiles: 10,// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: ['image/*'],// 15 秒，超时时间，默认为 10 秒timeout: 15 * 1000,// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。// meta: {//     token: 'xxx',//     otherKey: 'yyy'// },// 将 meta 拼接到 url 参数中，默认 false// metaWithUrl: false,// 自定义增加 http  headerheaders: {Authorization: this.$store.getters.token  || localStorage.getItem("token"),// soloFileName: 'article' //和后端协商的图片标识},uploadImgHeaders: {'Access-Control-Allow-Origin': 'origin'},// withCredentials:true,// 自定义上传// async customUpload(file, insertFn) {  // JS 语法//   const res = await API.Comm.upload(file)//   let resultUrl = this.$store.state.baseurl + res.response.data.src;//   insertFn(resultUrl)//   // insertFn(url, alt, href)// }// uploadImgHooks:{ //customInsert//插入图片的主要方法！！！！customInsert: (result, insertImg, editor) => {// 图片上传成功，插入图片的回调//result为上传图片成功的时候返回的数据let url = this.$store.state.baseurl + result.data.src;insertImg(url);}// }},},}}},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},onChange(editor) {          this.$emit('catchData', editor.getHtml());},getEditorText() {const editor = this.editor;if (editor == null) return;// console.log(editor.getText()); // 执行 editor API},printEditorHtml() {const editor = this.editor;if (editor == null) return;// console.log(editor.getHtml()); // 执行 editor API},async getContent() {//因为多个地方用到了该控件，所以在富文本编辑器内进行了异步区分，从而执行哪个异步方法if(this.wangType=='aaa'){if(this.aaaId){const res = await this.$API.AsyncFile.getContentByAAAId(this.aaaId)this.content = res.data.data.content}else{this.content = ''}}else if(this.wangType=='bbb'){if(this.bbbId){const res = await this.$API.AsyncFile.getContentByBBBId(this.bbbId)this.content = res.data.data.content}else{this.content = ''}}if (this.content) {//图片替换this.html = this.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {return `<img src='${p1.indexOf('http') > -1 ? p1 : 'http://xxxxxxxxxx.com.cn/' + p1}' />`})}// console.log("this.html", this.html)},},mounted() {// 模拟 ajax 请求，异步渲染编辑器this.getContent()},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！}}
</script><style src="@wangeditor/editor/dist/css/style.css"></style>

2.test.vue

<template><div class="body"><span>测试</span><span>正文</span><my-editor @catchData="catchData" :aaaId='aaaId' :wangType="wangType"></my-editor></div>
</template><script>
import MyEditor from '@/components/MyEditor'
export default {components: {MyEditor},data() {return {aaaId: '',wangType: 'aaa',content:''}},methods: {catchData(html) {this.content = html.replace('<img src="http://xxxxxxxxxx.com.cn/', '<img src="');// console.log("catchData---html", html)},}
}
</script><style lang="less" scoped></style>

3.store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
import user from './user'import getters from './getters'Vue.use(Vuex)export default new Vuex.Store({modules:{tab,user},state: {MAX_NUM:9999,baseurl: "http://xxxxxxxxxx.com.cn/",  //图片前缀updataurl:"http://xxxxx/uploadPic", //图片上传地址videoUploadUrl:"http://xxxx/uploadVideo", //视频上传地址},getters
})

使用富文本编辑器的时候直接将获取的正文内容传了过去，但每次获取到都是空，后来就直接在富文本编辑器里异步获取到正文内容，数据进行了显示，详情请参考以下链接：

参考：
vue使用wangEditor(富文本编辑器)时，异步获取数据，后端返回数据无法显示问题（已解决）

vue wangeditor富文本编辑器使用

相关问题

公告