如何向 QuillJS 编辑器添加自定义字体?
How to add custom fonts to the QuillJS editor?
我希望能够通过 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
有什么办法吗?另外,我假设我需要为我想使用的每种字体包含 link 到 Google 字体,对吗?
谢谢
你可以在这个链接中找到你的答案:
过程是这样的你需要4个组件:
带有 ql-font class 的 select 标签。这将包含新的字体选项。
将新字体添加到白名单。这必须在您调用 Javascript 中的 Quill 构造函数之前定义。
为下拉列表中的每个标签定义字体系列。示例:字体系列:"Inconsolata"
定义将在文本区域中使用的内容字体系列。按照第三个组件中的示例:.ql-font-inconsolata { font-family: "Inconsolata";}
有关详细信息,请访问 link。
我希望能够通过 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
有什么办法吗?另外,我假设我需要为我想使用的每种字体包含 link 到 Google 字体,对吗?
谢谢
你可以在这个链接中找到你的答案:
过程是这样的你需要4个组件:
带有 ql-font class 的 select 标签。这将包含新的字体选项。 将新字体添加到白名单。这必须在您调用 Javascript 中的 Quill 构造函数之前定义。 为下拉列表中的每个标签定义字体系列。示例:字体系列:"Inconsolata" 定义将在文本区域中使用的内容字体系列。按照第三个组件中的示例:.ql-font-inconsolata { font-family: "Inconsolata";}
有关详细信息,请访问 link。