有没有办法覆盖 Quill 的 svg 图标?
Is there a way to override Quill's svg icons?
我正在使用 quill.js 的最新版本,想知道是否有办法覆盖 Quill 在生成编辑器工具栏时使用的 svg 图标(对于气泡主题,如果这很重要。)
我试过四处寻找并查看源代码中定义图标的位置,但看起来要么传递一组工具栏选项,要么自己定义标记并将选择器传递给 toolbar
最终插入 svg 图标。
有没有一种方法可以自定义此行为,而无需获取 Quill 源代码并进行自定义构建?像一个人如何做的事情,例如Quill.import('formats/link')
自定义 sanitize()
?
气泡主题中的图标是内联的here。
您可以在启动编辑器之前导入图标模块并覆盖每个图标的标记。
在这个例子中,我将粗体图标替换为字体超棒的粗体图标。
记得还要加载超赞的字体 CSS 文件。
var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
// create the editor: var quill = new Quill('#editor-container', {});
在此示例中,我将粗体图标替换为 svg 圆圈:
var icons = Quill.import('ui/icons');
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
// create the editor: var quill = new Quill('#editor-container', {});
Copy Pasta of an issue from github:(没用 bubble 试过):
Quill creates buttons with .ql-* classes for every registered style in the config. You can override the blank buttons by targeting those classes with CSS as below (for an attachment icon):
.ql-attachment {
background: no-repeat scroll 50% 50% transparent !important;
background-image: url("attachment.svg") !important;
text-align: center;
}
.ql-attachment:hover {
background-image: url("attachment-hover.svg") !important
}
Quill js 让您自定义工具栏。您可以使用很棒的字体、您自己的 SVG 或自定义功能。这是 guidelines 示例。
创建工具栏按钮
<div id="tooltip-controls">
<button id="bold-button"><i class="fa fa-bold"></i></button>
:
</div>
创建blot
class BoldBlot extends Inline { }
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';
处理点击事件
$('#bold-button').click(function() {
quill.format('bold', true);
});
用 quill 注册
Quill.register(BoldBlot);
查看 codepen
我正在使用 quill.js 的最新版本,想知道是否有办法覆盖 Quill 在生成编辑器工具栏时使用的 svg 图标(对于气泡主题,如果这很重要。)
我试过四处寻找并查看源代码中定义图标的位置,但看起来要么传递一组工具栏选项,要么自己定义标记并将选择器传递给 toolbar
最终插入 svg 图标。
有没有一种方法可以自定义此行为,而无需获取 Quill 源代码并进行自定义构建?像一个人如何做的事情,例如Quill.import('formats/link')
自定义 sanitize()
?
气泡主题中的图标是内联的here。
您可以在启动编辑器之前导入图标模块并覆盖每个图标的标记。
在这个例子中,我将粗体图标替换为字体超棒的粗体图标。 记得还要加载超赞的字体 CSS 文件。
var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
// create the editor: var quill = new Quill('#editor-container', {});
在此示例中,我将粗体图标替换为 svg 圆圈:
var icons = Quill.import('ui/icons');
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
// create the editor: var quill = new Quill('#editor-container', {});
Copy Pasta of an issue from github:(没用 bubble 试过):
Quill creates buttons with .ql-* classes for every registered style in the config. You can override the blank buttons by targeting those classes with CSS as below (for an attachment icon):
.ql-attachment {
background: no-repeat scroll 50% 50% transparent !important;
background-image: url("attachment.svg") !important;
text-align: center;
}
.ql-attachment:hover {
background-image: url("attachment-hover.svg") !important
}
Quill js 让您自定义工具栏。您可以使用很棒的字体、您自己的 SVG 或自定义功能。这是 guidelines 示例。
创建工具栏按钮
<div id="tooltip-controls">
<button id="bold-button"><i class="fa fa-bold"></i></button>
:
</div>
创建blot
class BoldBlot extends Inline { }
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';
处理点击事件
$('#bold-button').click(function() {
quill.format('bold', true);
});
用 quill 注册
Quill.register(BoldBlot);
查看 codepen