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

Question

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

我已经尝试过四处寻找图标定义的来源,但它看起来像传递一个工具栏选项数组,或者自己定义标记并传递选择器以toolbar最终插入svg图标.

有没有办法自定义此行为,而无需获取Quill源并执行自定义生成？像人们可以做的事情,例如Quill.import('formats/link')定制sanitize()？

Answer 1

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

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

在这个例子中,我用粗体图标替换粗体图标.还记得加载字体很棒的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', {});