quill - 有没有办法覆盖 Quill 的 svg 图标？

Question

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

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

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

Answer 1

气泡主题中的图标是内联的here .

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

在此示例中，我将粗体图标替换为 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', {});