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

Question

基于这个link，我尝试添加一个新按钮，它允许我在光标位置插入一个字符串。到目前为止它有效，但是我不得不更改这一行：

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

至：

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

因为我希望能够用字符串粘贴 HTML 标签。

现在，在下一步中，我想添加带有 HTML 标签的 class：

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

然而，每当我现在点击按钮时，class 就被完全丢弃了。事实上，我得到的不是标签 i，而是标签 em，它适用于我想做的事情（斜体），但它仍然烦人。

如何确保标签和 class 在我点击按钮时保持不变？我想要做的就是单击一个按钮，并在编辑器中显示一个带有 class 的跨度中的小字符串。我怎样才能做到这一点？

Answer 1

正如 API 所说 "The snippet is interpreted by Clipboard matchers, which may not produce the exactly input HTML." link 正如我所测试的那样，它会删除 id、class 或您添加的任何属性。

您应该编辑 clipboard.js 文件以获得此：https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L97

其他选项包括一张图片，在这种情况下它适合并显示它，例如：

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, "<img src=\"http://vchaspik.ua/sites/default/files/krug.png\"><i>★</i>", "silent");

Answer 2

更新：18 年 4 月 24 日

所以花了很多时间才真正弄明白并让它发挥作用。可以通过创建您自己的 Blot 并覆盖 italic blot

来做到这一点

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

这里是 codepen 相同的

原答案

QuillJS 是富文本编辑器，而不是 HTML 所见即所得编辑器。所以你不能在同一个

中得到你自己的自定义html

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

在上面的代码笔中，点击源代码，试试你的代码，然后再次点击源代码

源视图

源视图 -> UI 视图 -> 源视图

如果您尝试删除剪贴板匹配器，那么您几乎会破坏富文本功能。

所以要么你离开这个要求，要么你为你的工作选择一个不同的编辑器。您应该查看的一些主题

https://github.com/quilljs/quill/issues/1856

https://github.com/quilljs/quill/issues/1733

https://github.com/quilljs/quill/issues/1657#issuecomment-325737074

Answer 3

你可以试试这个：

function insertStar() {
  const cursorPosition = this.quill.getSelection().index;
  this.quill.insertText(cursorPosition, "★");

  var bufferText = $(".ql-editor").html().replace(/<em class="my-icon">/g, "").replace(/<\/em>/g, "");

  var tmpOut = bufferText.replace(/★/g, "<em class='my-icon'>★</em>");

  $(".ql-editor").html(tmpOut);

  this.quill.setSelection(cursorPosition + 1);
}

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

How to create a button that adds a string with HTML tags and classes?

javascript

jquery

quill

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

How to create a button that adds a string with HTML tags and classes?

javascript

jquery

quill

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