5

我正在使用最新版本的 quill.js，并且想知道是否有一种方法可以覆盖 Quill 在生成编辑器工具栏时使用的 svg 图标（对于气泡主题，如果这很重要。）

我试过四处寻找，看看在源代码中定义图标的位置，但它看起来像是传递一组工具栏选项，或者自己定义标记并传递一个选择器以toolbar最终插入 svg 图标。

有没有一种方法可以自定义此行为而无需获取 Quill 源并进行自定义构建？诸如如何Quill.import('formats/link')定制之类的东西sanitize()？

4

3 回答 3

9

气泡主题中的图标在此处内联。

您可以在启动编辑器之前导入图标模块并覆盖每个图标的标记。

在此示例中，我将粗体图标替换为 font-awesome 粗体图标。记住还要加载 font-awesome 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', {});
于 2016-11-02T17:13:50.207 回答
2

Quill js 让你自定义工具栏。您可以使用 font awesome、您自己的 SVG 或自定义功能。这是带有示例的指南。

创建工具栏按钮

<div id="tooltip-controls">
  <button id="bold-button"><i class="fa fa-bold"></i></button>
  :
</div>

创建印迹

class BoldBlot extends Inline { }
BoldBlot.blotName = 'bold';
BoldBlot.tagName = 'strong';

处理点击事件

$('#bold-button').click(function() {
  quill.format('bold', true);
});

用 quill 注册

Quill.register(BoldBlot);

检查代码笔

于 2016-12-18T10:13:55.797 回答
1

从 github复制一个问题的 Pasta ：（还没有用气泡尝试过）：

Quill 为配置中的每个注册样式创建带有 .ql-* 类的按钮。您可以通过使用 CSS 定位这些类来覆盖空白按钮，如下所示（对于附件图标）：

.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
}
于 2016-11-02T17:21:15.683 回答