民初思韻網

加入收藏   設為首頁
選擇語言   簡體中文
你好,請 登陸 或 注冊
首頁 人文思韻 傳奇人物 歷史思潮 時代作品 話題討論 國民思韻 民初捐助 賬戶管理
  搜索  
    人文精神 >>> 技術的天空 溫和的思緒
字體    

小伙伴們驚呆了!10行 JavaScript 實現文本編輯器
小伙伴們驚呆了!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

歡迎訂閱我們的微信公眾賬號!
春秋茶館訂閱號
微信號 season-tea(春秋茶館)
每天分享一篇科技/遊戲/人文類的資訊,點綴生活,啟迪思想,探討古典韻味。
  清末民初歷史人物  民初人物
為元首清廉不阿至情至性
林森(1868年—1943年8月1日)字子超,號長仁。福建閩侯人。1868年出生于福建省閩侯縣尚干鄉,1884年于臺北電信局工作。1902年到上海海關任職,其間參加反清活....
散文大家曠達風趣
梁實秋(1903年1月6日-1987年11月3日),號均默,原名梁治華,字實秋,筆名子佳、秋郎,程淑等,中國著名的散文家、學者、文學批評家、翻譯家,華人世界第一個研究莎士....
資助民初精神網
        回頂部     寫評論

 
評論集
暫無評論!
發表評論歡迎你的評論
昵稱:     登陸  註冊
主頁:  
郵箱:  (僅管理員可見)

驗證:   验证码(不區分大小寫)  
© 2011   民初思韻網-清末民初傳奇時代的發現與復興   版權所有   加入收藏    設為首頁    聯繫我們    1616導航