首頁猿問 Quill.js 不斷從錨標記中剝離類

Quill.js 不斷從錨標記中剝離類

JavaScript

慕萊塢森 2023-06-29 22:41:33

我編寫了一個自定義鏈接模塊來處理內部鏈接等。該模塊還向 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"]? }});

查看完整描述

3 回答

紫衣仙女

TA貢獻1839條經驗獲得超15個贊

不幸的是，接受的答案并沒有完全解決我的問題。

我正在尋找一種添加/保留多個類的可能方法。

這是最終的解決方案：

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

});

反對回復 2023-06-29

Helenr

TA貢獻1780條經驗獲得超4個贊

您還需要使用該類將該元素添加到 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

});

反對回復 2023-06-29

胡說叔叔

TA貢獻1804條經驗獲得超8個贊

此版本將保留所有屬性（在我的初步測試中）并且不需要將它們顯式定義為印跡。

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

class FixedLink extends Inline {

? ? static create(value) {

? ? ? ? let node = super.create(value);

? ? ? ? for (const key in value){

? ? ? ? ? ? node.setAttribute(key, value[key]);

? ? ? ? }

? ? ? ? return node;

? ? }

? ? static formats(domNode) {

? ? ? ? const attributes = {};

? ? ? ? for (const attr of domNode.attributes){

? ? ? ? ? ? attributes[attr.name] = attr.value;

? ? ? ? }

? ? ? ? return attributes;

? ? }

}

FixedLink.blotName = "fixed_link";

FixedLink.tagName = "A";

反對回復 2023-06-29

3 回答
0 關注
231 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Quill.js 不斷從錨標記中剝離類

Quill.js 不斷從錨標記中剝離類

3 回答

添加回答