Quill.js продолжает удалять классы из тегов привязки

Я написал модуль пользовательских ссылок для обработки внутренних ссылок и т. Д. Также модуль добавляет некоторые классы в теги A, поэтому они могут отображаться по-разному. Но Quill удаляет классы после повторного создания экземпляра.

Я уже выяснил, что вам нужен собственный атрибут. Но я не могу заставить его работать.
Для простоты я создал песочница (без моего модуля).

Вот код:

<!-- ... -->
<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"]
  }
});

javascript wysiwyg quill
person Gordon Freeman    schedule 01.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам также нужно будет добавить этот элемент сбоку от экземпляра Quill, используя класс Inline.

Вот пример:

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 удаляет классы из тегов привязки (разветвленные)

Я не думал, что документация была полезной, но вот пример, который также может помочь:

person user3738936    schedule 14.11.2020
comment
Отлично. Спасибо. Я начал терять надежду :) - person Gordon Freeman; 14.11.2020
comment
Может быть, вы также можете сказать, как разрешить несколько классов? InternalLink.className не принимает массив. - person Gordon Freeman; 14.11.2020
comment
@GordonFreeman, если вы зададите другой вопрос и отметите меня на нем, я займусь этим. - person user3738936; 14.11.2020

arrow_upward
2
arrow_downward

К сожалению, принятый ответ не решает полностью мою проблему.
Я искал возможный способ добавить / сохранить несколько классов.

Вот окончательное решение:

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

const ATTRIBUTES = ["href", "rel", "target", "class"];
class InternalLink extends Inline {
  static create(value) {
    let node = super.create(value);
    node.setAttribute("href", value.href);
    if (value.rel) node.setAttribute("rel", value.rel);
    if (value.target) node.setAttribute("target", value.target);
    if (value.class) node.setAttribute("class", value.class);
    return node;
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
}

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

Quill.register({
  "formats/link": InternalLink
});

Edit Quill удаляет классы из тегов привязки (разветвленные)

person Gordon Freeman    schedule 15.11.2020