Question

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

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

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

Answer 1

试试这个：

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

基本上只创建了一个应用按钮，当单击该按钮时，将html从可编辑的div复制到另一个持有者div。诀窍是你需要解码html，因为内容可编辑divs编码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>

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

1 个答案: