vue wangEditor富文本表格(查看表格/序列样式缺失)问题

啰啰嗦嗦的序言(可看可不看):

先说下我的需求,富文本中新增一个表格需求,富文本已实现(增删查改),表格新增要一起同步这四个场景,
开始我用的vue-quill-editor,结果发现坑太多,我查看的时候没法把拿到的数据丢到quill里面去修改,只能v-html展示,还有缓存以及验证的一些问题,只是想在富文本加个表格,发现用vue-quill-editor要改的地方太多,果断弃坑了,网上找了下发现wangEditor貌似不错

兼容:

支持Vue、React、Angular等框架
常见的 PC 浏览器：Chrome，Firefox，Safari，Edge，QQ 浏览器，IE11。
不支持移动端。

安装

npm i wangeditor --save

组件化(新建文件-----wangEnduit.vue)

// wangEnduit.vue
<template>
  <div class='editor'>
     <div ref='toolbar' class='toolbar'></div>
  </div>
</template>

<script>
   // 局部引入富文本
   import E from 'wangeditor'
   export default {
     name: 'wangEnduit',
     data () {
       return {
          editor: null,
          info_: null,
       }
     },
     model: {
       prop: 'value',
       event: 'change',
     },
     props: {
       value: {
         type: String,
         default: ''
       }
       isClear: {
         type: Boolean,
         default: false
       }
     },
     watch: {
       // 触发清楚文本域
       isClear(val){
         this.editor.txt.clear()
         this.info_ = null
       }
     },
     value: function (value) {
       if (value !== this.editor.txt.html()) {
           this.editor.txt.html(this.value)
       }
     }
     // value输入内容框    
   },
   mounted () {
     this.seteditor()
     this.editor.txt.html(this.value)
   },
   methods: {
     seteditor () {
       this.editor = new E(this.$refs.toolbar)

       // 配置菜单
       this.editor.config.menus = [
         'head',       // 标题
         'bold',       // 粗体
         'fontSize',   // 字号
         'fontName',   // 字体
         'italic',     // 斜体
         'underline',  // 下划线
         'strikeThrough',  // 删除线
         'fontColor',      // 字体颜色
         'link',       // 插入链接
         'list',       // 列表
         'justify',   // 对齐方式
         'table',     // 表格
         'undo',      // 撤销
         'redo',      // 回退
       ]
       this.editor.config.onchange = (html) => {
         this.info_ = html
         this.$emit('change', this.info_)
       }
       this.editor.create()    // 创建富文本
       this.editor.txt.html()  // 富文本内容
     }
   }
</script>

<style lang='less'>
 .editor{
   width: 100%;
   margin: 0 auto;
   position: relative;
   z-index: 3;
 }
 .toolbar {
   border: 1px solid #ccc;
   min-height: 50px;
 }
 // 富文本查看表格样式(对查看的时候需要自己手动加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
</style>

应用页面

<Form :model='form' :label-width='140' inline>
  <FormItem label='发布内容:' prop='announceDesc' style="width: 90%; margin: 15px 0;">
    <editorBar v-model='form.announceDesc' :isClear='isClear' @change='change'></editorBar>
  </FormItem>
<Form>

<script>
  import editorBar from './wangEnduit'
  export default {
    name: 'announceView',
    components: { editorBar },
    data () {
     return {
       isClear: false,
	   form: {
	     announceDesc: ''
	   }
     },
    }
   created () {},
   methods: {
     change (val) {
       this.form.announceDesc = val
     }
   }
  }
</script>

效果图

原文详细请点击这里