WangEditor

官方文档

wangeditor5在线文档

依赖安装

yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save 

组件使用

vue-wangeditor

注意: 样式引入时,直接在 main.js 中引入一次即可 (一定要引入 css 样式)

讯享网import "@wangeditor/editor/dist/css/style.css"; 

获取wangeditor 文本框内容

this.editor.txt.html()

• 获取带有文本格式的文本框内容

this.editor.txt.text()

讯享网

• 获取纯文本内容

设置默认值

可以在edit容器中重新添加一个div标签,然后给这个标签 添加一个指令 v-html即可

ruleForm.arContext 就是上面获取的文本框内容

上传图片设置

方法一:

• 使用 base64 编码直接将图片插入到内容中
• 优点 : 配置简单
• 缺点 : 上传图片过大或上传多张图片，字段可能会保存失败（被截断），不完整，大图无法显示在富文本框等问题

如果项目中不想做图片限制可以用下面的方法，直接上传到后端服务器
参考文章@卡西卡西yu
参考文章@Bravo-ljq

方式一:使用 base64 编码直接将图片插入到内容中 this.editor.config.uploadImgShowBase64 = true; 方式二:上传至服务器; // 配置服务器端地址 upload:上传图片地址 editor.customConfig.uploadImgServer = '/upload' //可使用监听函数在上传图片的不同阶段做相应处理 editor.customConfig.uploadImgHooks = { 
    before: function (xhr, editor, files) { 
    // 图片上传之前触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 // return { 
    // prevent: true, // msg: '放弃上传' // } }, success: function (xhr, editor, result) { 
    // 图片上传并返回结果，图片插入成功之后触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, fail: function (xhr, editor, result) { 
    // 图片上传并返回结果，但图片插入错误时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, error: function (xhr, editor) { 
    // 图片上传出错时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, timeout: function (xhr, editor) { 
    // 图片上传超时时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） customInsert: function (insertImg, result, editor) { 
    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： var url = result.url insertImg(url) // result 必须是一个 JSON 格式字符串！！！否则报错 } } } 

wangeditor层级问题

讯享网.w-e-toolbar { 
    z-index: 2!important; } .w-e-menu { 
    z-index: 2 !important; } .w-e-text-container { 
    z-index: 1 !important; } 

wangeditor 工具栏失效问题

• less 环境下 使用 ::v-deep进行样式穿透
• scss/sass 环境下 使用 /deep/ 进行样式穿透.

<style> .w-e-toolbar { 
    z-index: 2!important; } .w-e-menu { 
    z-index: 2 !important; } .w-e-text-container { 
    z-index: 1 !important; } </style> 

wangeditor table不显示问题

在线文档
参考文章@熊xing
原因 :

• 富文本查看表格样式(对查看的时候需要自己手动加table/td/th的样式,不然就只有内容没有线)

讯享网.notice { 
    table { 
    border: none; border-collapse: collapse; } table td, table th{ 
    border: 1px solid #ccc; padding: 3px 5px; min-width: 50px; height: 20px; } table th { 
    border-right: 1px solid #ccc; border-bottom: 2px solid #ccc; text-align: center; background-color: #f1f1f1; } blockquote{ 
    display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1; } code{ 
    display: inline-block; *display: inline; *zoom: 1; background-color: #f1f1f1; border-radius: 3px; padding: 3px 5px; margin: 0 3px; } pre code { 
    display: block; } ul, ol{ 
    margin: 10px 0 10px 20px; } pre { 
    border: 1px solid #ccc; background-color: #f8f8f8; padding: 10px; margin: 5px 0px; font-size: 0.8em; border-radius: 3px; } .ql-editor ul li { 
    list-style-type: disc; // 解决序列li前面的.不展示问题 } .ql-editor ol li { 
    list-style-type: decimal; // 解决序列li前面的数字不展示问题 } } // 在哪个页面查看就给表格外围加个class包起来,因为加的样式是全局的,避免样式污染覆盖,我查看表格的页面外围加了个class=notice