所见即所得文本编辑器的实现原理

最新推荐文章于 2021-06-21 03:29:30 发布

pick

最新推荐文章于 2021-06-21 03:29:30 发布

阅读量860

点赞数

文章标签：文本编辑 function iframe button html javascript

本文链接：https://blog.csdn.net/pick/article/details/4124394

版权

WYSIWYG (what you see is what you get) 所见即所得编辑器的实现原理

WYSIWYG文本编辑器的原理很简单，主要是使用 html 的 iframe 元素和 javascript 中

document.designMode 和 document.execCommand()方法（关于execCommand()的方法详见

http://www.mozilla.org/editor/midas-spec.html）

接下来我们实现一个简单的编辑器

源码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <title>Untitled Document</title>
       <script type="text/javascript">
         function init()
         {
            var contentObj = document.getElementById("content");

            //取得 iframe 内的窗口对象。firefox 可以直接用 contentObj.document;
            var contentDocObj = contentObj.contentWindow.document;

            contentDocObj.designMode = "on";
         }

         function makeBlob()
         {
            var contentDocObj = document.getElementById("content").contentWindow.document;

            contentDocObj.execCommand("Bold",false,null);
         }

         function makeItalic()
         {
            var contentDocObj = document.getElementById("content").contentWindow.document;

            contentDocObj.execCommand("Italic",false,null);
         }

         function changeColor()
         {
            var contentDocObj = document.getElementById("content").contentWindow.document;

            contentDocObj.execCommand('ForeColor',false,'#BBDDCC');
         }
       </script>
</head>
<body οnlοad="init()">
       <p><button οnclick="makeBlob()"><strong>Bold</strong></button>    
       <button οnclick="makeItalic()"><strong>Italic</strong></button>    
       <button οnclick="changeColor()"><strong>Color</strong></button>
       </p>
       <iframe id="content" width="400px" height="200px" style="border:1px solid"></iframe>
</body>

pick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
所见即所得文本编辑器的实现原理

WYSIWYG (what you see is what you get) 所见即所得编辑器的实现原理WYSIWYG文本编辑器的原理很简单，主要是使用 html 的 iframe 元素和 javascript 中document.designMode 和 document.execCommand()方法（关于execCommand()的方法详见 http://www
复制链接

扫一扫