如何在 contenteditable 中添加自定义标签？

Question

我正在使用 contenteditable 和 execCommand 开发所见即所得编辑器。粗体、斜体和其他东西都工作得很好，但我对如何添加自定义标签（例如“<span style="white-space: nowrap;">”等）感到困惑。似乎没有标准工具（这真的很奇怪）。我考虑过用代码手动操作 DOM，但由于格式复杂，这似乎相当困难，我不知道如何正确地做到这一点（这样 html 将保持有效）。那么这个问题有什么解决办法吗？

Answer 1

经过几次尝试，我停止了这个决定。它不使用 insertHTML（IE 不支持），保持格式并按预期工作（好吧，在大多数情况下）。仍在寻找更好的解决方案，但也许对某人有帮助。

var range = document.getSelection().getRangeAt(0);

var clone = $(range.cloneContents());
$.each(clone.find('.nowrap'), function(id, elem) {
    $(elem).contents().unwrap();
});

range.deleteContents();
range.insertNode($('<span class="nowrap"/>').append(clone).get(0));

如何在 contenteditable 中添加自定义标签？

How to add custom tags in contenteditable?

javascript

html

wysiwyg