怎么做web编辑器

最新推荐文章于 2025-05-14 09:28:45 发布

转载最新推荐文章于 2025-05-14 09:28:45 发布 · 1.1k 阅读

前端技术专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何利用div和iframe元素实现富文本编辑器的功能。通过设置div的contenteditable属性为true来使其可编辑，并详细展示了如何通过JavaScript设置iframe的designMode属性为On，从而使iframe能够支持富文本编辑，包括不同浏览器下的兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

能做编辑器的容器就两个div和iframe

div：
<div contenteditable=true>可以编辑了</div>

iframe：
尽管textarea也可以做到显示多种标签，但通常的web编辑器不是textarea, 而是designMode=on的iframe
用对于iframe 需要用javascript设置起designMode=On就可以了
我试了下在ie下可以但火狐下不能用
<script>
function GetIframeInnerHtml(objIFrame)
{
        var iFrameHTML = "";
        if (objIFrame.contentDocument)
        {
                // For NS6
                iFrameHTML = objIFrame.contentDocument.innerHTML;
        }
        else if (objIFrame.contentWindow)
        {
                // For IE5.5 and IE6
                iFrameHTML = objIFrame.contentWindow.document.body.innerHTML;
        }
        else if (objIFrame.document)
        {
                // For IE5
                iFrameHTML = objIFrame.document.body.innerHTML;
        }
        return iFrameHTML;
}
</script>

<iframe id="aaa" src="about:blank"></iframe>
<input type="button" value="获取ifram内容" onclick="alert(GetIframeInnerHtml(document.getElementById( "aaa")));" />

<script>
document.getElementById( "aaa").contentWindow.document.designMode= "On";
</script>