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

lhb25發表於2013-08-12
JavaScript

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

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

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

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

contenteditable

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

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

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

execCommand

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

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

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

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

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

$(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;
		}
	})
});

　　完整程式碼如下：

<!DOCTYPE html>
<html>
    <head>
    <title>Editable WYSIWYG</title>
        <link href="bootstrap.css" rel="stylesheet">
        <link href="font-awesome.css" rel="stylesheet">
        <style>
            #editor {
                resize:vertical; 
                overflow:auto; 
                border:1px solid silver; 
                border-radius:5px; 
                min-height:100px;
                box-shadow: inset 0 0 10px silver;
                padding:1em;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="container-fluid">
                <div id='pad-wrapper'>
                    <div id="editparent">
                        <div id='editControls' class='span12' style='text-align:center; padding:5px;'>
                            <div class='btn-group'>
                                <a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a>
                                <a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='bold' href='#'><b>Bold</b></a>
                                <a class='btn' data-role='italic' href='#'><em>Italic</em></a>
                                <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
                                <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a>
                                <a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a>
                                <a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a>
                                <a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a>
                                <a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a>
                                <a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='h1' href='#'>h<sup>1</sup></a>
                                <a class='btn' data-role='h2' href='#'>h<sup>2</sup></a>
                                <a class='btn' data-role='p' href='#'>p</a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='subscript' href='#'><i class='icon-subscript'></i></a>
                                <a class='btn' data-role='superscript' href='#'><i class='icon-superscript'></i></a>
                            </div>
                        </div>
                        <div id='editor' class='span12' style='' contenteditable>
                            <h1>This is a title!</h1>
                            <p>This is just some example text to start us off</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
            $(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;
                    }
                })
            });
        </script>
    </body>

</html>

　　原始碼下載    線上演示

相關文章