Question

我正在尝试构建一个基本的文本编辑器，我为此使用了很多execCommand。但是，我想以这种方式创建一个标题，这样每当用户点击标题按钮（在文本编辑器中）时，execCommand将组成一个新标题，并且应该添加 id 到新创建的标题，以便稍后我只需单击即可在文档中创建互连链接。

假设我在标题文本编辑器中的输入是：

创建ID为

的标题

我已经尝试过创建一个ID为

的标题

document.execCommand('formatBlock', false, header).id = userSelection;

HTML输出：

<h3><a href="#Create a heading with id">Create a heading with id</a></h3>

正如您所看到的，ID未添加到HTML输出中，因此如何向其添加ID？我也试过这个链接，但收效甚微：
How to add class or id or CSS style in execCommand formatBlock 'p' tag?

请帮忙:)

编辑：

好吧，我有一个黑客来做这件事：
我们可以使用Query选择器将id添加到新创建的标记中，这样每当我使用execCommand创建一个新标记时，我会通过选择主div（进行编辑）找到该标记，并在找到之后标题标记，我可以简单地将id添加到它就像我用它在div中创建一个标题标记（contenteditable =＆＃34; true＆＃34;）：

document.execCommand('formatBlock', false, header);

并添加＆＃39; id＆＃39;对于这个新创建的标签，请使用：

let elemMain = $("#editor " + header);   
// this will find the div with id="editor" and then find the header tag inside it.

elemMain[elemMain.length - 1].id = userSelection;
//this will add an id to the last header tag inside of div.

嗯，这只是一个完成工作的黑客，但是如果有人发现了一个直接的方法来添加＆＃39; id＆＃39;使用execCommand标记然后最欢迎：）

Answer 1

使用execCommand在此处为<body>标记添加id属性。

使用javascript：

var idValue = "body-element";
document.execCommand(document.body.setAttribute("id", idValue));

使用jquery：

var idValue = "body-element";
document.execCommand($('body').attr('id', idValue));

新创建元素的工作代码段：

＆＃13;

var para = document.createElement("p");
var node = document.createTextNode("This is newly created paragraph ( inspect this element and see the id.)");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
var idValue = "new_id";
document.execCommand(para.setAttribute("id", idValue));

＆＃13;

<html>
<body>

<div id="div1">
<p id="p1">This is an old paragraph.</p>
</div>

</body>
</html>

＆＃13;

Answer 2

对使用document.execCommand来操纵contenteditable元素有相同的要求，最终诉诸于innerHTML的{{1}}选项。例如...

execCommand

...在插入点添加指定的HTML，使HTML元素可由document.execCommand("insertHTML", false, "<div id='myId'>Hello World!</div>")寻址。这种技术的缺点是必须构造HTML字符串。一种替代方法是使用myId函数，然后在调用createElement ...

时引用元素节点的outerHTML。

execCommand

请注意，我仅在Chrome上进行过测试。

希望这可以帮助其他人找到互联网的这个角落。

如何设置＆＃34; id＆＃34;使用Javascript中的execCommand标记？

2 个答案: