如何创建一个添加HTML标签和类的字符串的按钮？

Question

如何创建一个添加HTML标签和类的字符串的按钮？

基于此链接,我尝试添加一个新按钮,它允许我在光标位置插入一个字符串.它到目前为止工作,但我不得不改变这一行:

this.quill.insertText(cursorPosition, "?");

Run Code Online (Sandbox Code Playgroud)

至:

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '<i>?</i>');

Run Code Online (Sandbox Code Playgroud)

因为我希望能够使用字符串粘贴HTML标记.

现在,在下一步中,我想添加一个带有HTML标记的类:

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '<i class="my-icon">?</i>');

Run Code Online (Sandbox Code Playgroud)

但是,每当我现在单击该按钮时,该类就完全被丢弃了.事实上,我得到的标签是em,而不是标签i,它适用于我想做的事情(斜体),但它仍然很烦人.

单击按钮时,如何确保标签和类保持不变？我想要做的就是单击一个按钮,并在一个带有类的span中包含一个小字符串,以便在编辑器中显示.我怎样才能做到这一点？

Answer 1

Tar*_*ani 9

更新:4月24日至18日

所以花了很多时间来实现这一点并让它发挥作用.可以通过创建自己的Blot并覆盖italic印迹来做到这一点

let Inline = Quill.import('blots/inline');

class Icon extends Inline {
  static create(value) {
    let node = super.create(value);
    if (value) {
      console.log(value)
      node.setAttribute('class', value);
    }
    return node;
  }

  static formats(domNode) {
    console.log(domNode)
    return domNode.getAttribute("class");
  }

  format(name, value) {
    console.log(name, value)
    if (name !== this.statics.blotName || !value) return super.format(name, value);
    if (value){
      this.domNode.setAttribute('class', value);
    }
  }
}
Icon.blotName = 'icon';
Icon.tagName = 'span';
Quill.register(Icon);

var BackgroundClass = Quill.import('attributors/class/background');
var ColorClass = Quill.import('attributors/class/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundClass, true);
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);


var quill = new Quill('#editor-container', {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});


var customButton = document.querySelector('#custom-button');
customButton.addEventListener('click', function() {
  quill.insertText(quill.getSelection().index, "?\n", 'icon', 'fa fa-icon fa-icon-green');
});

Run Code Online (Sandbox Code Playgroud)

这是一个相同的codepen

原始答案

QuillJS是富文本编辑器,而不是HTML WYSIWYG编辑器.所以你不能在同一个内部获得自己的自定义html

https://codepen.io/anon/pen/ZyEjrQ

在上面的代码笔中,单击source,尝试代码并再次单击source

来源观点