向 Quill 面板添加按钮，允许您将材质图标插入到文本中

问题描述

我想让用户能够在文本中添加一小组预定义的图标（材料图标，因为它们适合网站的风格）。在 html 代码中它看起来像  [name of icon]  我的看法。

第 1 步 - 将带有图标名称 [图标名称] 的文本添加到光标所在的位置
第 2 步 - 将选择设置为文本你刚刚输入
第 3 步 - 将其包装在标签  
第四步——取消选择，用户继续写文本。

我做了什么（以名为“等级”的图标为例）：

let Inline = quill.import('blots/inline');
    
class gradeBlock extends Inline{    
        static create(value){
            let node = super.create();
            node.setAttribute('class','material-icons');
            return node;    
        }    
    }
    
gradeBlock.blotName = 'gradeblock';
    gradeBlock.tagName = 'i';
    quill.register(gradeBlock);
    
var quill = new quill('#editor-container',{
      modules: {
        toolbar: [
          [{ header: [1,2,false] }],['bold','italic','underline'],['image','code-block','gradeblock']
        ]
      },placeholder: 'Compose an epic...',theme: 'sNow'  // or 'bubble'
    });
    

var customButton = document.querySelector('.ql-gradeblock');
customButton.addEventListener('click',function() {
    console.log('Clicked!');
    let mergeFieldText = "grade";
    var selection = quill.getSelection(true);
    quill.insertText(selection.index,mergeFieldText,'gradeblock');
});

但它不能按照我需要的方式工作。当您第一次单击按钮时，所需的图标会添加到文本中，但随后文本、所有键入的文本仍保留在  标签内，并且只有在您再次单击时才会重置。然后添加未格式化的文本“等级”。事实上，该按钮在覆盖格式的开/关模式下工作。我该如何解决这个问题？

请帮忙找出错误。我不明白我做错了什么。如何在不再次单击按钮的情况下使更多文本保留在当前   内，但在   之外。以及如何使它始终只是在文本中插入图标。也许有一些完全不同的简单方法可以解决我的问题？

您可以在这里尝试我或您自己的代码：https://quilljs.com/playground/#quill-playground

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-font-api html javascript quill