显示带有 contenteditable 属性的 html 内容作为输入答案

【问题标题】：Display html content with contenteditable attribute as input显示带有 contenteditable 属性的 html 内容作为输入
【发布时间】：2011-07-04 12:52:23
【问题描述】：

是否可以将 contenteditable 属性用作 html 编辑器？例如将 Youtube 可嵌入代码粘贴到具有 contenteditable 属性的 div 中，并能够立即观看视频。

<div class="editable" contenteditable="true">
    Text or html here…
</div>

也许还有其他建议如何在不刷新页面的情况下做到这一点？

【问题讨论】：

标签： jquery html contenteditable embedding

【解决方案1】：

试试这个：

http://jsfiddle.net/bVHHb/1/

基本上只是创建了一个应用按钮，单击该按钮时，将 html 从可编辑 div 复制到不同的持有者 div。诀窍是您需要对 html 进行解码，因为内容可编辑的 div 会编码 html 标签。

function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes[0].nodeValue;
}

$("#apply").click(function(){
    $("#holder").html(htmlDecode($("#editable").html()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="editable" contenteditable="true">
    Text or html here…
</div>
<button id="apply">apply</button>

<div id="holder"></div>

【讨论】：

感谢您的回复！实际上，当可编辑内容的输入被应用回可编辑 div 时，它似乎可以工作。我让 apply 函数与 .focusout() 函数一起工作。 http://jsfiddle.net/erdMe/3/
是的，应该可以。请注意，如果您随后重新编辑该内容，可能会发生奇怪的事情。
是的！相当不稳定。奇怪的是有时有效，有时无效。
这对我不起作用。我试过Text or html <b>here</b>…，它只是没有为我显示“这里”（Chrome）。
这个问题在这一点上很古老，但代码在 chrome 中对我来说似乎仍然可以正常工作。