wangeditor -- 富文本编辑工具

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 工具栏失效问题

其实是 container 的层级高于 toolbar 的层级,遮挡到了 菜单显示的功能,设置以下配置即可解决.
注意 : 如果 style标签有 scoped 属性,这样添加样式是不生效的.

• 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