从 Quill 获取字体系列答案

【问题标题】：Get font family from Quill从 Quill 获取字体系列
【发布时间】：2018-11-02 23:42:35
【问题描述】：

我正在使用 Quill 构建富文本编辑器。它工作正常，我可以像 example 一样更改所选单词的字体。

下一步是导出已编辑文本的原始 HTML。我期待标准的 font-family 样式被导出，但我得到了 Quill 样式。

例如，使用上面的链接，如果我选择单词“hello”并将字体更改为Mirza：

输出的原始 HTML：<span class="ql-font-mirza">Hello </span>
预期的原始 HTML：<span style="font-family: mirza;">Hello</span>

【问题讨论】：

标签： html quill

【解决方案1】：

在 Quill guide 中有解释。

Example:

var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      [{'font': []}],
      ['bold', 'italic', 'underline']      
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

【讨论】：

【解决方案2】：

在Quill guide中有解释。

例子：

//The font of the quill editor
var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];  
var Font = Quill.import('formats/font');  
Font.whitelist = fonts; //Add fonts to the whitelist 
Quill.register(Font, true);
var toolbarOptions = [
    [{
            'header': [1, 2, 3, 4, 5, 6, false]
        }],
        ['bold', 'italic', 'underline', 'strike'],
        [{
            'list': 'ordered'
        }, {
            'list': 'bullet'
        }],
        [{'font': fonts }],
        ['link', 'image', 'video']
];
var quill = new Quill('#quillEditor', {
    modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder:'Enter The Song Here'
});

【讨论】：