自定义字体，字号----vue-quill-editor

【富文本-vue-quill-editor】

（一）缺点

1，不容易支持行间距
2，不容易支持表格

（二）优点

1，部分工具的引入支持 class也可支持style引入
2、可扩展性

（三）在vue中的使用

1，安装

npm install vue-quill-editor --save
npm install quill --save

2，使用

import { quillEditor } from "vue-quill-editor"; //调用编辑器

import 'quill/dist/quill.core.css';

import 'quill/dist/quill.snow.css';

import 'quill/dist/quill.bubble.css';

3，注册

components: {
quillEditor
}

（四）支持 字体 字号
1，html部分

<quillEditor
          ref="myTextEditor"
          v-model="content"
          class="editor"
          :options="quillOption"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        ></quillEditor>

2，js部分

需要先再app.js中引入字体，字号 等样式

quill.font.scss

$font-family-simsun: 'SimSun';
$font-family-simhei: 'SimHei';
$font-family-kaiti: 'KaiTi';
$font-family-fangsong: 'FangSong';
$font-family-arial: 'Arial';
$font-family-sans-serif: 'sans-serif';

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  font-family: $font-family-simsun;
  content: "宋体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  font-family: $font-family-simhei;
  content: "黑体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  font-family: $system-default-font-family;
  content: "微软雅黑";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  font-family: $font-family-kaiti;
  content: "楷体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  font-family: $font-family-fangsong;
  content: "仿宋";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  font-family: $font-family-arial;
  content: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  font-family: $font-family-sans-serif;
  content: "sans-serif";
}

.ql-font-SimSun {
  font-family: $font-family-simsun;
}

.ql-font-SimHei {
  font-family: $font-family-simhei;
}

.ql-font-Microsoft-YaHei {
  font-family: $system-default-font-family;
}

.ql-font-KaiTi {
  font-family: $font-family-kaiti;
}

.ql-font-FangSong {
  font-family: $font-family-fangsong;
}

.ql-font-Arial {
  font-family: $font-family-arial;
}

.ql-font-sans-serif {
  font-family: $font-family-sans-serif;
}

.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';
}

.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';
}

.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';
}

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

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

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

app.js中引入

@import '@assets/scss/quill.font.scss';
``



script中引入并注册
``
import { quillEditor, Quill } from 'vue-quill-editor';

let Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '20px', '24px', '30px', '36px'];
Quill.register(Size, true);
// // 自定义字体类型
var fonts = [
  'SimSun',
  'SimHei',
  'Microsoft-YaHei',
  'KaiTi',
  'FangSong',
  'Arial'
];
let Font = Quill.import('attributors/style/font');
Font.whitelist = fonts;
Quill.register(Font, true);

// Quill.import('attributors/style/align')
var aligns = [
  false,
  'SimSun',
  'SimHei',
  'Microsoft-YaHei',
  'KaiTi',
  'FangSong',
  'Arial'
];
let Align = Quill.import('attributors/style/align');
Font.whitelist = aligns;
Quill.register(Align, true);

2，data里面配置工具栏

（register）注册器部分没有使用上，表格相关部分无效（后期在 富文本外实现了表格的可编辑）

quillOption: {
        placeholder: '',
        theme: 'snow', // 主题
        modules: {
          // table:true
          toolbar: {
            container: [
              [
                {
                  size: Size.whitelist
                }
              ], // 字号
              [
                {
                  font: Font.whitelist
                }
              ], // 字体
              [
                {
                  align: Align.whitelist
                }
              ], // 居中
              [
                {
                  indent: '-1'
                },
                {
                  indent: '+1'
                }
              ],
              // [{ 'indent':IndentStyle.whitelist }], // 缩进
              ['bold', 'italic', 'underline', 'strike'],
              // ['blockquote', 'code-block'],
              [
                {
                  header: 1
                },
                {
                  header: 2
                }
              ],
              [
                {
                  list: 'ordered'
                },
                {
                  list: 'bullet'
                }
              ],
              [
                {
                  script: 'sub'
                },
                {
                  script: 'super'
                }
              ],
              [
                {
                  header: [1, 2, 3, 4, 5, 6, false]
                }
              ],
              [
                {
                  color: []
                },
                {
                  background: []
                }
              ],
              [
                // {
                //   table: 'TD'
                // },
                {
                  'table-insert-row': 'TIR'
                },
                {
                  'table-insert-column': 'TIC'
                },
                {
                  'table-delete-row': 'TDR'
                },
                {
                  'table-delete-column': 'TDC'
                }
              ]
            ], // 工具栏选项
            handlers: {
              shadeBox: null,
              // table: function(val) {
              //   // _self.quill.getModule('table').insertTable(2, 2);
              // },
              'table-insert-row': function() {
                // this.quill.getModule('table').insertRowBelow();
                _self.insertRowFn();
              },
              'table-insert-column': function() {
                // this.quill.getModule('table').insertColumnRight();
                _self.insertColFn();
              },
              'table-delete-row': function() {
                _self.deleteRowFn();
              },
              'table-delete-column': function() {
                _self.deleteColFn();
                // this.quill.getModule('table').deleteColumn();
              },
              bold: function(val) {
                document.execCommand('Bold', null, null);
              }
            } // 事件重写
          }
        },
        register(q) {
          // 注册标签(因为在富文本编辑器中是没有div,table等标签的，需要自己去注册自己需要的标签)
          class div extends q.import('blots/block/embed') {}
          class table extends q.import('blots/block/embed') {}
          class tr extends q.import('blots/block/embed') {}
          class td extends q.import('blots/block/embed') {}
          div.blotName = div.tagName = 'div';
          table.blotName = table.tagName = 'table';
          tr.blotName = tr.tagName = 'tr';
          td.blotName = td.tagName = 'td';
          q.register(div);
          q.register(table);
          q.register(tr);
          q.register(td);
        }
      },

3，如果需要在工具栏添加自定义图标，需要自行添加

可以通过class获取，对应class名为ql-工具栏自定义名称

（五）出现的问题
一直提示表格 注册不上

（六）效果