富文本編輯器(js)

時間 2019-11-17

原文原文鏈接

富文本編輯器，可讓咱們更方便的設計規劃咱們本身想要的應用程序。富文本編輯器的原理是在HTML中嵌入一個空的HTML頁面，而後經過設置designMode屬性，使得這個空白HTML可被編輯，而編輯後的源碼就是原理body中的HTML代碼。designMode有兩個屬性，是on和off，當設置爲on的時候，整個文檔就處於可編輯的狀態，而後就能夠像word同樣進行文字處理。javascript

先看一下實施後的簡易富文本編輯器，由於只是作個示例，因此並無把全部功能都加入進去，只是作了不多的一部分，如下是代碼html

 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來進行設置java

 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上加入對文本編輯器的效果控制按鈕：ide

<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。spa

接下來就是代碼導出的問題，即顯示源碼，這個在文本編輯器內容提交時尤爲重要，就是將iframe中提取出HTML源碼，並插入到指定的地方，咱們能夠經過如下的方式獲得HTML源碼。設計

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

同時咱們也能夠作個顯示源碼的按鈕，來看看效果：code

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。