如何使用工具栏选项在Quill js上添加字体类型？
如何使用工具栏选项在Quill js上添加字体类型？
提问于 2017-05-01 23:51:40
我用奎尔制作了一个丰富的文本区域。我有下一个工具条的选项：
new Quill('#quilljs-container', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block', 'link'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
]
},
theme: 'snow'
});<!-- Style -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- quill js container -->
<div id="quilljs-container"> </div>
<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
目前，当我尝试在工具栏上添加更多类型编辑‘字体’选项(例如‘字体’：'arial')时，select选项只显示"Sans Serif“，而不是显示"Arial”选项。我spect看到的是默认选项("Sans Serif“、"Serif”、"Monospace")以及我想添加的自定义选项。
此外，我尝试了文档中显示的定制化属性，但是使用当前的配置，它只显示默认选项。也许我漏掉了什么。
我希望我清楚自己的疑虑，有人能帮我。
更新：
为了更清楚一点，我试图在Quill容器配置之后添加更多的字体
容器：在最简单的级别上，工具栏控件可以由一个简单的格式名称数组指定。
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-05-02 01:35:16
这就是你所需要的。
这个过程是这样的，您需要4组件
- 带有
select类的ql-font标记。这将包含新的字体选项。 - 将新字体添加到白名单中。这必须在您调用Javascript中的
Quill构造函数之前定义。 - 为下拉列表中的每个
font-family定义label。示例：font-family: "Inconsolata" - 定义将在文本区域中使用的内容字体系列。遵循第三个组件中的示例：
.ql-font-inconsolata { font-family: "Inconsolata";}
更新
我读这些文件是为了帮助你，他们提到
在最简单的级别上，工具栏控件可以由格式名称的简单数组指定.
或者，您可以通过将DOM元素或选择器传递给Quill来手动创建HTML中的工具栏；这就是这个答案中给出的解决方案。另一方面，文档没有提到，但是在尝试了许多使用数组加载数据的方法(没有成功)之后，我注意到这是不可能的。因此，这是我的贡献，也是我发布这个更新的原因。我为手动实现做了相应的操作(JS和HTML)。
可以使用HTML和JS构造函数创建自定义工具栏。构造函数将在#toolbar-container部分中以toolbar的形式接收modules。
然后，您可以只使用HTML标记生成相同的结构。这一概念非常相似。例如：
- 如果在JS中，我们声明如下所示的数组：
['bold', 'italic', 'underline', 'strike']中的
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>- 在JS中是
[{ 'header': 1 }, { 'header': 2 }]中的HTML将被
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
</span>因此，这里有一个完整的例子，在这个代码片段中：
// Add fonts to whitelist
let Font = Quill.import('formats/font');
// We do not add Sans Serif since it is the default
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial'];
Quill.register(Font, true);
// We can now initialize Quill with something like this:
let quillObj = new Quill('#quilljs-container', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'This is a font test...',
theme: 'snow'
});<!-- Style -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
/* Set dropdown font-families */
#toolbar-container .ql-font span[data-label="Sans Serif"]::before {
font-family: "Sans Serif";
}
#toolbar-container .ql-font span[data-label="Inconsolata"]::before {
font-family: "Inconsolata";
}
#toolbar-container .ql-font span[data-label="Roboto"]::before {
font-family: "Roboto";
}
#toolbar-container .ql-font span[data-label="Mirza"]::before {
font-family: "Mirza";
}
#toolbar-container .ql-font span[data-label="Arial"]::before {
font-family: "Arial";
}
/* Set content font-families */
.ql-font-inconsolata {
font-family: "Inconsolata";
}
.ql-font-roboto {
font-family: "Roboto";
}
.ql-font-mirza {
font-family: "Mirza";
}
.ql-font-arial {
font-family: "Arial";
}
/* We do not set Sans Serif since it is the default font */
</style>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font">
<option selected>Sans Serif</option>
<option value="inconsolata">Inconsolata</option>
<option value="roboto">Roboto</option>
<option value="mirza">Mirza</option>
<option value="arial">Arial</option>
</select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
<button class="ql-link"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
</div>
<!-- quill js container -->
<div id="quilljs-container"></div>
<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
Stack Overflow用户
发布于 2018-11-26 19:02:01
您可以使用JavaScript构造函数创建自定义字体选择。
这里是Quill Quickstart页面的基本HTML -
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>JavaScript初始化器中所需的代码如下所示：
let Font = Quill.import('formats/font');
Font.whitelist = ['times-new-roman', 'arial'];
Quill.register(Font, true);
let toolbarOptions = [
[{ 'font': ['', 'times-new-roman', 'arial'] }],
['clean'] // remove formatting button
];
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});还需要将以下内容添加到样式表中，其中CSS选择器中的名称是上述JavaScript中的名称：
/* Set droplist names - -item is the currently selected font, -label is the font's appearance in the droplist*/
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before
{
content: 'Default';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before
{
content: 'Times New Roman';
font-family: 'Times New Roman';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before
{
content: 'Arial';
font-family: 'Arial';
}
/****************************************************
Set the font-family content used for the HTML content.
*****************************************************/
.ql-font-arial {
font-family: 'Arial';
}
.ql-font-times-new-roman {
font-family: 'Times New Roman';
}Stack Overflow用户
发布于 2019-05-31 09:34:40
FWIW，我复制了史蒂夫B的代码，并使它更加通用。这样你不需要做css规则的所有复制粘贴，等等.只需指定要添加到字体数组中的字体。
// specify the fonts you would
var fonts = ['Arial', 'Courier', 'Garamond', 'Tahoma', 'Times New Roman', 'Verdana'];
// generate code friendly names
function getFontName(font) {
return font.toLowerCase().replace(/\s/g, "-");
}
var fontNames = fonts.map(font => getFontName(font));
// add fonts to style
var fontStyles = "";
fonts.forEach(function(font) {
var fontName = getFontName(font);
fontStyles += ".ql-snow .ql-picker.ql-font .ql-picker-label[data-value=" + fontName + "]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=" + fontName + "]::before {" +
"content: '" + font + "';" +
"font-family: '" + font + "', sans-serif;" +
"}" +
".ql-font-" + fontName + "{" +
" font-family: '" + font + "', sans-serif;" +
"}";
});
var node = document.createElement('style');
node.innerHTML = fontStyles;
document.body.appendChild(node);
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': fontNames }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
// Add fonts to whitelist
var Font = Quill.import('formats/font');
Font.whitelist = fontNames;
Quill.register(Font, true);
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43728080
复制相关文章
相似问题
腾讯云开发者
