从Quill获取字体系列

Question

我正在使用Quill构建富文本编辑器。它运行良好，我可以像本例中那样更改所选单词的字体。

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

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

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

Answer 1

这在Quill指南中有解释。

示例：

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

Answer 2

这在Quill指南中有解释。

示例：

//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'
});