以编程方式插入 HTML 时，无法为 trix 编辑器中的任何标签添加 ID 或类等属性

Question

我试图在通过 java 脚本插入 html 时在 trix-editor 中为 span 标签添加 id、class 等属性，但是当我检查该标签的 DOM 时，编辑器会从标签中删除添加的属性。

我的 JavaScript 代码插入带有属性的 html：

element.editor.insertHTML("<span id='" + userId + "' class='mention-user'>" + userName + "</span >"); 

DOM：

 <div><!--block-->@<span style="font-size: 12px;">abc/span></div></trix-editor>

连我都试过了：

element.editor.activateAttribute("href", "https://trix-editor.org/");

这工作正常，但无法添加 id 或类。任何人都可以有想法在标签中添加 id 或 class 吗？

Answer 1

摘自 Trix 的

insertHTML

文档：

Trix 将首先将 HTML 转换为其内部文档模型。 在此转换期间，任何无法表示的格式 Trix 文档中的内容将会丢失。

...这意味着如果 Trix 无法理解某个属性，它就不会输入 将该属性添加到生成的 HTML 中，因此您必须找到另一个 出路。

有一个 hack 可以强制 Trix 保留元素的属性， 涉及 Trix 附件。它的主要缺点是你不能 不再在 Trix 中编辑它。此外，您的元素将被包裹在 a

<figure>

，虽然格式始终可以通过以下方式解决 在 Trix 之后附加一个覆盖样式表，没有银牌 语义问题的项目符号。

这个 JavaScript 是：

/* programmatically construct DOM to prevent XSS */
const span = document.createElement('span');
span.id = userId;
span.className = 'mention-user';
span.append(userName);

element.editor.insertAttachment(
    new Trix.Attachment({
        content: span.innerHTML,
    })
);

或者，在 jQuery 中：

const span = $('<span>')
    .attr('id', userId)
    .addClass('mention-user')
    .append(new Text(userName));

element.editor.insertAttachment(
    new Trix.Attachment({
        content: span[0].innerHTML,
    })
);

对于大胆的人来说，您还可以破解 Trix 以添加对

id

、

class

、 和其他属性。如何实现这一点留待解决 供读者练习。

Answer 2

您可以使用超过1种方式

简单的js：

document.getElementsByTagName("span")[0].setAttribute("class", "mention-user");

document.getElementsByTagName("span")[0].setAttribute("id", userId);

或jquery：

$("span").attr("id",userId);
$("span").attr("class","mention-user");

不知道为什么，但你使用 insertHtml 不知道是否可以用它添加 id 或 class 希望能回答你的问题