javascript - How to create a button that adds a string with HTML tags and classes? - Stack Overflow

admin管理员组

文章数量:1237555

Based on this link, I tried to add a new button, which allows me to have a string inserted at cursor position. It works so far, however I had to change this line:

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

to:

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

as I wanted to be able to paste HTML tag with the string.

Now, in the next step, I want to add a class with the HTML tag:

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

However, whenever I click the button now, the class is just pletely discarded. In fact, instead of the tag i, I get the tag em, which works for what I want to do (italics), but it's still annoying.

How can I make sure the tags and class stay the same when I click the button? All I want to do is to click a button and have a little string enclosed in a span with a class to appear in the editor. How can I achieve this?

Based on this link, I tried to add a new button, which allows me to have a string inserted at cursor position. It works so far, however I had to change this line:

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

to:

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

as I wanted to be able to paste HTML tag with the string.

Now, in the next step, I want to add a class with the HTML tag:

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

However, whenever I click the button now, the class is just pletely discarded. In fact, instead of the tag i, I get the tag em, which works for what I want to do (italics), but it's still annoying.

How can I make sure the tags and class stay the same when I click the button? All I want to do is to click a button and have a little string enclosed in a span with a class to appear in the editor. How can I achieve this?

• javascript
• jquery
• quill

Share Improve this question Follow edited Apr 17, 2018 at 14:42 asked Apr 16, 2018 at 10:04 user1734974user1734974 2

• even if you edit the html directly in the devtools, jquill will repair and replace i with em. This means you cannot have your own html inside the editor as it standardizes all the html input. So even though want to achieve this, it can't work – Tarun Lalwani Commented Apr 18, 2018 at 12:57
• The bounty is about to expire, please check the answer – Tarun Lalwani Commented Apr 25, 2018 at 4:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10 +100

Update: 24-Apr-18

So it took a lot of time to actually figure this out and get it working. It is possible to do this by create your own Blot and overriding the 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');
});

Here is a codepen for the same

Original Answer

QuillJS is rich text editor and not a HTML WYSIWYG editor. So you cannot get your own custom html inside the same

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

In the above code pen, click source, try your code and click source again

Source view

Source view -> UI View -> Source view

If you try to remove the clipboard matchers, then you will nearly break the rich text functionality.

So either you leave this requirement or you pick a different editor for your job. Some threads you should look at

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

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

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

As API says "The snippet is interpreted by Clipboard matchers, which may not produce the exactly input HTML." link As I have tested it removes id, class or whatever attribute you add.

You should edit the clipboard.js file to obtain this: https://github./quilljs/quill/blob/develop/modules/clipboard.js#L97

Other option is include an image, in this case it fits and shows it, for example:

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

You can try this:

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

本文标签： javascriptHow to create a button that adds a string with HTML tags and classesStack Overflow