Vue项目中的富文本插件表格、字号相关问题

vue-quill-editor字号自定义

在近日开发项目过程中需要用到富文本，不过样式和工具栏需要按照需求来自定义，我首先想到的是用vue-quill-editor，不过vue-quill-editor的字号是以large、small这类来定义的，按照需求是要改成以 ‘XXpx’ 更直观的显示，所以就需要去覆盖插件样式。

1、首先创建一个css文件

// 自定义字号样式

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
  font-size: 14px;
}

.ql-size-14px {
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-size-16px {
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
  font-size: 18px;
}

.ql-size-18px {
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}

.ql-size-20px {
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
  font-size: 22px;
}

.ql-size-22px {
  font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
  font-size: 26px;
}

.ql-size-26px {
  font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
  font-size: 28px;
}

.ql-size-28px {
  font-size: 28px;
}

2、引入样式并注册

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import './quill-editor.css'
import * as Quill from 'quill'

var sizes = [false, '16px', '18px', '20px', '22px', '26px', '28px']
var Size = Quill.import('formats/size')

3、更改工具栏功能

<template>
    <quillEditor v-model="fromData.myValue" :options="editorOption" class="editors" />
</template>

<script>
    data() {
        return{
            editorOption: {
                modules: {       
                    toolbar: [        // 自定义功能
                      ['bold'],         // 加粗
                      [{ size: sizes }],     // 自定义的字体大小
                      [{ color: [] }],       // 字体颜色
                      ['image']              // 图片
                    ]
                },
                placeholder: ''              
            },
        }
    }
</script>

使用自定义字体样式后一定要在想回显的地方引入自定义css

vue-quill-editor自定义表格问题

关于自定义表格试了很多网上的方法但是一直不生效，原因是插入表格的一些insert方法找不到，通过refs也没有找到内部方法，所以建议想要带表格的功能还是用wangEditor吧。

WangEditor的基本使用

1、下载并引入WangEditor

import E from 'wangeditor'

2、创建组件并实例化

<div id="wangeditor" class="wang_edit">
    <div ref="editorRef"></div>
</div>



// 实例化

mounted() {
    this.editor = new E(this.$refs.editorElem)          // 实例化
    this.editor.config.onchange = (html) => {           // 绑定富文本数据在formData里
        this.formData.myValue = html
    }
    this.editor.config.menus = [         // 自定义菜单
      'bold',
      'fontSize',
      'foreColor',       // 字体颜色
      'table',
      'justify'          //  对齐方式
    ]
    this.editor.config.showFullScreen = false        // 全屏不显示
    this.editor.create()           

}

3、回显内容

需要在created钩子中去设置回显

created() {
    ----------  // 调接口
    .then(res => {
        this.editor.txt.html('<p>' + this.formData + '</p>')  // 设置回显 
    })
}

使用wangEditor存在的问题

1、表格边框不生效：官网其实说明了原因wangEditor官网

 解决办法就是在需要回显的地方使用全局样式给table添加边框（需要加/deep/）,例如:

/deep/ table {
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
}