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

时间:2018-04-16 10:04:28

标签: javascript jquery quill

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

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

为:

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

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

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

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

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

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

3 个答案:

答案 0 :(得分:9)

更新:24-Apr-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');
});

以下是同一

codepen

Working

原始答案

QuillJS是富文本编辑器,而不是HTML WYSIWYG编辑器。所以你不能在同一个

中获得自己的自定义html

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

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

来源视图

Source view

来源视图 - &gt; UI视图 - &gt;来源视图

Converted source view

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

因此,您要么保留此要求,要么为工作选择不同的编辑器。你应该看一些线程

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

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

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

答案 1 :(得分: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);
}

答案 2 :(得分:2)

正如API所说“片段由剪贴板匹配器解释,这可能无法生成准确输入的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");