Search code examples
javascriptwysiwygquill

Quill.js keeps stripping classes from anchor tags

I've written a custom link module to handle internal links, etc. Also the module adds some classes to the A tags, so they can be displayed differently. But Quill removes the classes once it gets instantiated again.

I've already found out that you need a custom attributor. But I can not get it working.
To keep thinks simple, I've created a sandbox (without my module).

Here is the code:

<!-- ... -->
<div id="editor">
  <a href="/test" class="btn">Foo</a>
</div>
<!-- ... -->

import Quill from "quill";
import "quill-paste-smart";

import "quill/dist/quill.snow.css";

const Parchment = Quill.import("parchment");

let LinkClass = new Parchment.Attributor.Class("link", "ql-link", {
  scope: Parchment.Scope.INLINE,
  whitelist: ["btn"]
});
Quill.register({ "attributors/class/link": LinkClass }, true);

new Quill("#editor", {
  theme: "snow",
  modules: {
    toolbar: ["bold", "italic", "underline", "link", "clean"]
  }
});
Solution

  • You will need to add that element in side of your Quill instance as well, using the Inline class.

    Here is an example:

    const Inline = Quill.import("blots/inline");


InternalLink.blotName = "internal_link";
InternalLink.className = "btn";
InternalLink.tagName = "A";

Quill.register({
  "attributors/class/link": LinkClass,
  "formats/internal_link": InternalLink
});

    Edit Quill removes classes from anchor tags (forked)

    I didn't think the documentation was helpful but here is an example that can help also: