wangEditor使用教程

1.安装 （vue2）

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

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

2. 使用 （可封装成子组件）

 3.父组件使用

子组件将文本内容传到父组件，change事件接收内容

以上就可以实现富文本编辑器的使用

注：自己在使用的过程中的遇到的一下麻烦

1.文本内容的回显

可以使用v-html  

 2.如何移除某些不需要的菜单配置

首先我们可以通过 toolbar.getConfig() 获取工具栏默认配置

import { DomEditor } from '@wangeditor/editor'

const toolbar = DomEditor.getToolbar(editor)

toolbar.getConfig().toolbarKeys

再通过以下代码  将我们不需要的工具移除

this.toolbarConfig = {
         excludeKeys: [
             "fullScreen",
             "group-video",
             "insertImage"
         ]
     }

3.富文本回显一些样式丢失  如表格边框 li标签的圆点，我用了notice包裹再外面 防止影响全局样式，所以你们用的时候记得加类！

.notice {
   table {
     border: none;
     border-collapse: collapse;
     margin-top: 25px;
   }
   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前面的数字不展示问题
   }
 }