如何将自定义字体添加到 QuillJS 编辑器？答案

【问题标题】：How to add custom fonts to the QuillJS editor?如何将自定义字体添加到 QuillJS 编辑器？
【发布时间】：2019-02-16 11:14:55
【问题描述】：

我希望能够通过 JavaScript 使用工具栏选项将自定义字体系列添加到我的 Quill JS 编辑器，而不是通过 HTML 定义它们。

我的代码如下，与文档中的代码相同：

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      
  [{ 'indent': '-1'}, { 'indent': '+1' }],          
  [{ 'direction': 'rtl' }],                       

  [{ 'size': ['small', false, 'large', 'huge'] }],  
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],

  [{ 'font': [] }],       // Here, how do I specify custom font families??

  [{ 'align': [] }],


];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

此处运行的代码：https://codepen.io/anon/pen/VgVZMg

有没有办法做到这一点？另外，我假设我需要为我想要使用的每种字体添加一个指向 Google 字体的链接，对吧？

谢谢

【问题讨论】：

这里回答：stackoverflow.com/questions/43728080/…

标签： javascript fonts font-family quill

【解决方案1】：

您可以在此链接中找到答案：

How to add font types on Quill js with toolbar options?

这个过程是这样的，你需要4个组件：

带有 ql-font 类的选择标签。这将包含新的字体选项。将新字体添加到白名单。这必须在您调用 Javascript 中的 Quill 构造函数之前定义。为下拉列表中的每个标签定义字体系列。示例：字体系列：“Inconsolata” 定义将在文本区域中使用的内容字体系列。按照第 3 个组件中的示例： .ql-font-inconsolata { font-family: "Inconsolata";}

更多信息请访问链接。

【讨论】：