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

Question

我正在使用contenteditable和execCommand处理WYSIWYG编辑器。大胆，斜体，其他东西工作正常，但我对如何添加自定义标签感到困惑（例如“<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));