小伙伴們驚呆了！10行 JavaScript 實現文本編輯器

>>>  技術話題—商業文明的嶄新時代  >>> 簡體     傳統

最近，我需要做一個非常基本的網頁內容編輯功能。我不想使用 iframe ，我也不想要一個功能特別多的復雜編輯器，只需要很基本的內容編輯功能，例如粗體，斜體，列表，對齊等等。

您可能感興趣的相關文章

 

 

　　用谷歌搜索找了很久，發現所有的插件都是功能太復雜，不是我想要的。所以，我決定我自己來實現需要的編輯功能。剛開始我覺得應該要花費很多的時間，因為我想象內容編輯功能應該是很復雜的。

　　但事實證明，它是如此簡單，讓我十分驚訝！借助 HTML5 特性，所有的工具都已經可用，所有你需要做的只是配合他們編寫一些非常簡單的 JavaScript 代碼調用就可以了。

　　你需要兩樣東西，第一是：

?
1
contenteditable

　　contenteditable 是 HTML 中的一個屬性，設置 HTML標簽的 contenteditable=“true” 時，即可開啟該元素的編輯模式。contenteditable 的作用相當神奇，可以讓 div 或整個網頁，以及 span 等等元素設置為可編輯。

　　我們最常用的輸入文本內容是 input 與 textarea，使用 contenteditable 屬性后，可以在div、table、p、span、body等等很多元素中輸入內容。如果想要整個網頁可編輯，可以在 body 標簽內設置 contenteditable。contenteditable 已在 HTML5 標準中得到有效的支持.

 　　第二樣東西是一個功能特殊的函數：

?
1
execCommand

　　execCommand 讓我們能夠對 contenteditable 區域的內容做一些相當復雜的操作。如果你想了解更為詳細的內容可以看這里：The Mozilla docs。 

　　從本質上講， execCommand 有三個參數：

　　Command Name – 命令名稱；
　　ShowDefaultUI – 未實現，所以最好設置為 false；
　　ValueArgument – 命令的參數；

　　多數情況下，ValueArgument 可以設置為 null，但有一種情況：當你要設置一行文本的標簽的時候（h1，h2，p 等），你需要使用 formatBlock 命令，并把標簽放到 ValueArgument 中。

　　現在，事情就很簡單了，我們把 exexCommand 要執行的命令放到 data-role 屬性中，然后編寫簡單的 JavaScript 都可以很容易地完成編輯器功能了。核心代碼其實就10行：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
    $('#editControls a').click(function(e) {
        switch($(this).data('role')) {
            case 'h1':
            case 'h2':
            case 'p':
                document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                break;
            default:
                document.execCommand($(this).data('role'), false, null);
                break;
        }
    })
});

　　完整代碼如下：

　　

源碼下載      在線演示


夢想天空 2013-08-31 10:44:29

[新一篇] 2012年最有用的50款 jQuery 插件集錦——《表單篇》

[舊一篇] 微軟未來新構想：巨屏觸控與移動設備完美互動
回頂部
寫評論
相關閱讀
推薦文章


評論集


暫無評論。

稱謂：

内容：

驗證：


返回列表