如何在 Javascript 中使用 execCommand 为标签设置“id”？
[英]How to set an “id” to a tag using the execCommand in Javascript?
问题描述
I am trying to make up a basic text editor, and I used execCommand a lot for this.
我正在尝试编写一个基本的文本编辑器，为此我经常使用 execCommand。 However, I want to create a heading in such a way, so that whenever user will click on the heading button(in text editor), the execCommand will make up a new heading and should add id to the newly created heading, so that, later I can create interlinks in document with just a single click.但是，我想以这种方式创建标题，以便每当用户单击标题按钮（在文本编辑器中）时， execCommand 将组成一个新标题并应将id添加到新创建的标题，以便，稍后我只需单击一下即可在文档中创建互连。
Let say my input in for heading text editor is:假设我在标题文本编辑器中的输入是：
Create a heading with id创建一个带有 id 的标题
I've tried this to create a heading with id:我试过这个来创建一个带有 id 的标题：
document.execCommand('formatBlock', false, header).id = userSelection;
HTML output for this:用于此的 HTML 输出：
<h3><a href="#Create a heading with id">Create a heading with id</a></h3>
As you can see, the id is not added to the HTML output, so how can I add an id to it?如您所见，该 id 未添加到 HTML 输出中，那么如何向其添加 id？
I've also tried this link but didn't get much:我也试过这个链接，但没有得到太多：
How to add class or id or CSS style in execCommand formatBlock 'p' tag? 如何在 execCommand formatBlock 'p' 标签中添加类或 id 或 CSS 样式？
Please help :)请帮忙:)
EDIT :编辑：
Well, I got a hack to do this:好吧，我有一个技巧可以做到这一点：
We can add the id to the newly created tag by using the Query selector so that whenever I will create a new tag using execCommand, I will find that tag by selecting the main div(in which editing is going on), and after finding that header tag, I can simply add the id to it.我们可以使用查询选择器将 id 添加到新创建的标签中，这样每当我使用 execCommand 创建新标签时，我都会通过选择主 div（正在编辑的地方）找到该标签，然后找到标头标签，我可以简单地将 id 添加到它。
Like I used this to create a header tag in div(contenteditable="true"):就像我用它在 div(contenteditable="true") 中创建标题标签一样：
document.execCommand('formatBlock', false, header);
And to add 'id' to this newly created tag, use this:要将“id”添加到这个新创建的标签，请使用以下命令：
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.
Well, this is just a hack to get work done, but if anyone finds out a direct way to add 'id' to tag using execCommand then most welcome :)好吧，这只是完成工作的一种技巧，但是如果有人找到了使用 execCommand 将“id”添加到标记的直接方法，那么非常欢迎:)
2 个解决方案
解决方案1
0 2018-03-22 12:22:05
Adding id attribute to the <body> tag here using execCommand.在这里使用 execCommand 将 id 属性添加到<body>标记。
Using javascript :使用 javascript ：
var idValue = "body-element";
document.execCommand(document.body.setAttribute("id", idValue));
Using jquery :使用 jquery ：
var idValue = "body-element";
document.execCommand($('body').attr('id', idValue));
Working snippet for newly created element:新创建元素的工作片段：
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));
<html> <body> <div id="div1"> <p id="p1">This is an old paragraph.</p> </div> </body> </html>
解决方案2
0 2019-11-05 00:18:36
Had the same requirement to use document.execCommand to manipulate a contenteditable element, and eventually resorted to the innerHTML option of execCommand .有相同的要求使用document.execCommand来操作contenteditable元素，并最终求助于execCommand的innerHTML选项。 For example...例如...
document.execCommand("insertHTML", false, "<div id='myId'>Hello World!</div>")
...adds the specified HTML at the insertion point, leaving the HTML element addressable by myId . ...在插入点添加指定的 HTML，留下可由myId寻址的 HTML 元素。 The drawback to this technique is that one has to construct the HTML string.这种技术的缺点是必须构造 HTML 字符串。 An alternative is to employ the createElement function, and then reference the outerHTML of the element node when calling execCommand ...另一种方法是采用createElement函数，然后引用该outerHTML呼叫时该元素节点execCommand ...
let elemNode = document.createElement('div')
elemNode.id = 'myId'
elemNode.innerText = 'Hello World!'
document.execCommand('insertHTML', false, elemNode.outerHTML)
Note that I only tested this on Chrome.请注意，我仅在 Chrome 上对此进行了测试。
Hope this helps anyone else finding this nook of the internet.希望这可以帮助其他人找到互联网的这个角落。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.