首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >以contenteditable属性作为输入显示html内容

以contenteditable属性作为输入显示html内容
EN

Stack Overflow用户
提问于 2011-07-04 20:52:23
回答 1查看 3.3K关注 0票数 1

可以使用contenteditable属性作为html编辑器吗?例如,将Youtube可嵌入代码粘贴到具有contenteditable属性的div中,以便能够立即观看视频。

代码语言:javascript
复制
<div class="editable" contenteditable="true">
    Text or html here…
</div>

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

EN

回答 1

Stack Overflow用户

发布于 2011-07-05 01:29:04

试试这个:

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

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

代码语言:javascript
复制
function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes[0].nodeValue;
}

$("#apply").click(function(){
    $("#holder").html(htmlDecode($("#editable").html()));
});
代码语言:javascript
复制
<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>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6571775

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档