Question

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

我试过四处寻找并查看源图标定义的位置，但它看起来像传递工具栏选项数组，或者自己定义标记并将选择器传递给toolbar最终插入svg图标。

有没有办法自定义此行为，而无需获取Quill源并进行自定义构建？像人们可以做的事情，例如： Quill.import('formats/link')要自定义sanitize()？

Answer 1

泡泡主题中的图标是内联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 circle替换粗体图标：

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', {});

Answer 2

复制问题的面食from github :(还没试过泡泡）：

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
}

Answer 3

Quill js让您自定义工具栏。您可以使用字体awesome，您自己的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的svg图标？

3 个答案: