如何将自定义字体添加到QuillJS编辑器?

时间:2019-02-16 11:14:56

标签: javascript fonts font-family quill

我希望能够通过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字体的链接,对吗?

谢谢

1 个答案:

答案 0 :(得分:1)

您可以在此问题中找到答案:

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

此过程需要四个组件:

带有ql-font类的选择标签。这将包含新的字体选项。 将新字体添加到白名单。在调用Java语言中的Quill构造函数之前,必须先定义它。 在下拉菜单中为每个标签定义字体系列。示例:font-family:“ Inconsolata” 定义将在文本区域中使用的内容字体系列。遵循第三个组件中的示例:.ql-font-inconsolata {font-family:“ Inconsolata”;}

有关更多信息,请访问链接。