【问题标题】: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 &lt;b&gt;here&lt;/b&gt;…,它只是没有为我显示“这里”(Chrome)。
    • 这个问题在这一点上很古老,但代码在 chrome 中对我来说似乎仍然可以正常工作。
    猜你喜欢
    • 1970-01-01
    • 2013-05-03
    • 2022-07-07
    • 1970-01-01
    • 2014-01-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多