富文本编辑器(js)

浏览数：55 / 时间：2015年06月09日

富文本编辑器，可以让我们更方便的设计规划我们自己想要的应用程序。富文本编辑器的原理是在HTML中嵌入一个空的HTML页面，然后通过设置designMode属性，使得这个空白HTML可被编辑，而编辑后的源码就是原理body中的HTML代码。designMode有两个属性，是on和off，当设置为on的时候，整个文档就处于可编辑的状态，然后就可以像word一样进行文字处理。

先看一下实施后的简易富文本编辑器，因为只是做个示例，所以并没有把所有功能都加入进去，只是做了很少的一部分，以下是代码

 1 <html>
 2 <head>
 3     <script type="text/javascript">
 4         window.onload = function(){
 5             frames[‘editCon‘].document.designMode = ‘on‘;
 6         var table = document.getElementById(‘toolBar‘);
 7         table.addEventListener(‘change‘,function(event){
 8             var target = event.target;
 9             if(target.tagName.toLowerCase() == ‘select‘){
10                 frames[‘editCon‘].document.execCommand(target.id,false,target.options[target.selectedIndex].value);
11             }
12         },false);
13         table.addEventListener(‘click‘,function(event){
14             var target = event.target;
15             if(target.tagName.toLowerCase() == ‘input‘){
16                 frames[‘editCon‘].document.execCommand(target.id,false,null);
17             }
18         },false)
19         document.getElementById(‘VC‘).addEventListener(‘click‘,function(event){
20             var text = document.getElementById(‘htmlCon‘),
21             frame = document.getElementById(‘editCon‘);
22             if(text.style.display == ‘none‘){
23                 text.innerHTML = frames[‘editCon‘].document.body.innerHTML;
24                 text.style.display = ‘inline-block‘;
25                 frame.style.display = ‘none‘;
26             }else{
27                 frame.style.display = ‘inline-block‘;
28                 text.style.display = ‘none‘;
29             }
30         })
31     }
32     </script>
33 </head>
34 <body>
35     <h1>富文本编辑器</h1>
36     <table id="toolBar" width=600>
37         <tr>
38             <td>color:<select id="backcolor"><option value="#f00">red</option><option value="#00f">blue</option></select></td>
39             <td>size:<select id="fontsize"><option value=10>10</option><option value=15>15</option></select></td>
40             <td><input type="button" value="I" id="italic"/></td>
41         </tr>
42     </table>
43     <input type="button" id="VC" value="Code or View"/><br/>
44     <textarea id="htmlCon" name="htmlCon" style="display:none;width:600px;height:500px;"></textarea>
45     <iframe id="editCon" name="editCon" style="width:600px;height:500px;">
46         <html>
47             <head>
48             </head>
49             <body>
50             </body>
51         </html>
52     </iframe>
53 </body>
54 </html>

View Code

由于designMode需要在页面这个加载完以后才能实施，所以必须用onload来进行设置

 1 <html>
 2 <head>
 3     <script type="text/javascript">
 4         window.onload = function(){
 5             frames[‘editCon‘].document.designMode = ‘on‘;
 6     }
 7     </script>
 8 </head>
 9 <body>
10     <h1>富文本编辑器</h1>
11     <iframe id="editCon" name="editCon" style="width:600px;height:500px;">
12         <html>
13             <head>
14             </head>
15             <body>
16             </body>
17         </html>
18     </iframe>
19 </body>
20 </html>

在以上的代码运行后，就已经可以再iframe中编辑文字了，只不过由于还没有加入功能键，所以只能打字。。。。

接下来就是要操作富文本了，富文本的操作主要是通过document.execCommand()进行，这个方法传递三个参数：要执行的命令，表示浏览器是否应该为当前命令提供用户界面的一个布尔值(一般为false即可)，和执行命令必须的一个值(没有则为null)。FireFox在第二个参数设置为true是抛出错误。具体参数列表这里就不列出来了。这个函数是对你选中的内容进行操作的。所以不用再自己去选择操作的具体对象。

于是先在原有的HTML上加入对文本编辑器的效果控制按钮：

<table id="toolBar" width=600>
        <tr>
            <td>color:<select id="backcolor"><option value="#f00">red</option><option value="#00f">blue</option></select></td>
            <td>size:<select id="fontsize"><option value=10>10</option><option value=15>15</option></select></td>
            <td><input type="button" value="I" id="italic"/></td>
        </tr>
    </table>

然后是相应的js

 1 var table = document.getElementById(‘toolBar‘);
 2         table.addEventListener(‘change‘,function(event){
 3             var target = event.target;
 4             if(target.tagName.toLowerCase() == ‘select‘){
 5                 frames[‘editCon‘].document.execCommand(target.id,false,target.options[target.selectedIndex].value);
 6             }
 7         },false);
 8         table.addEventListener(‘click‘,function(event){
 9             var target = event.target;
10             if(target.tagName.toLowerCase() == ‘input‘){
11                 frames[‘editCon‘].document.execCommand(target.id,false,null);
12             }
13         },false);

若要考虑跨浏览器的话，就要注意addEventListener在IE中应该用attachEvent代替，同时加入event=event||window.event ，因为IE中event是建立在window下的一个属性，并不会直接赋值给参数event，同时target = event.target ||event.srcElement。

接下来就是代码导出的问题，即显示源码，这个在文本编辑器内容提交时尤其重要，就是将iframe中提取出HTML源码，并插入到指定的地方，我们可以通过以下的方式得到HTML源码。

1 text.innerText = frames[‘editCon‘].document.body.innerHTML;

同时我们也可以做个显示源码的按钮，来看看效果：

<input type="button" id="VC" value="Code or View"/>

 1 document.getElementById(‘VC‘).addEventListener(‘click‘,function(event){
 2             var text = document.getElementById(‘htmlCon‘),
 3             frame = document.getElementById(‘editCon‘);
 4             if(text.style.display == ‘none‘){
 5                 text.innerText = frames[‘editCon‘].document.body.innerHTML;
 6                 text.style.display = ‘inline-block‘;
 7                 frame.style.display = ‘none‘;
 8             }else{
 9                 frame.style.display = ‘inline-block‘;
10                 text.style.display = ‘none‘;
11             }
12         })

这样就可以看到源码了。然后就是整合以后的代码，如下：

<html>
<head>
    <script type="text/javascript">
        window.onload = function(){
            frames[‘editCon‘].document.designMode = ‘on‘;
        var table = document.getElementById(‘toolBar‘);
        table.addEventListener(‘change‘,function(event){
            var target = event.target;
            if(target.tagName.toLowerCase() == ‘select‘){
                frames[‘editCon‘].document.execCommand(target.id,false,target.options[target.selectedIndex].value);
            }
        },false);
        table.addEventListener(‘click‘,function(event){
            var target = event.target;
            if(target.tagName.toLowerCase() == ‘input‘){
                frames[‘editCon‘].document.execCommand(target.id,false,null);
            }
        },false);
        document.getElementById(‘VC‘).addEventListener(‘click‘,function(event){
            var text = document.getElementById(‘htmlCon‘),
            frame = document.getElementById(‘editCon‘);
            if(text.style.display == ‘none‘){
                text.innerText = frames[‘editCon‘].document.body.innerHTML;
                text.style.display = ‘inline-block‘;
                frame.style.display = ‘none‘;
            }else{
                frame.style.display = ‘inline-block‘;
                text.style.display = ‘none‘;
            }
        })
    }
    </script>
</head>
<body>
    <h1>富文本编辑器</h1>
    <table id="toolBar" width=600>
        <tr>
            <td>color:<select id="backcolor"><option value="#f00">red</option><option value="#00f">blue</option></select></td>
            <td>size:<select id="fontsize"><option value=10>10</option><option value=15>15</option></select></td>
            <td><input type="button" value="I" id="italic"/></td>
        </tr>
    </table>
    <input type="button" id="VC" value="Code or View"/><br/>
    <textarea id="htmlCon" name="htmlCon" style="display:none;width:600px;height:500px;"></textarea>
    <iframe id="editCon" name="editCon" style="width:600px;height:500px;">
        <html>
            <head>
            </head>
            <body>
            </body>
        </html>
    </iframe>
</body>
</html>