10行 JavaScript 實現文本編輯器

時間 2019-12-08

標籤 javascript 實現文本編輯器欄目 JavaScript 简体版

原文原文鏈接

背景

咱們平時用到的瀏覽器編輯器功能都會比較多，實現的代碼邏輯也會很是複雜，每每是做爲一個單獨插件被引入進來的。可是，如今我只須要一個很基本的內容輸入內容編輯的功能，如：粗體、斜體、列表、對齊等。那要怎麼辦，直接引用個插件太臃腫了。css

藉助 HTML5 特性，全部的工具都已經可用，全部你須要作的只是配合他們編寫一些很是簡單的 JavaScript 代碼調用就能夠了。html

開擼

你須要兩樣東西，第一是：jquery

contenteditablebootstrap

contenteditable 是 HTML 中的一個屬性，設置 HTML標籤的 contenteditable=「true」時，便可開啓該元素的編輯模式。contenteditable 的做用至關神奇，可讓 div 或整個網頁，以及 span 等等元素設置爲可編輯。瀏覽器

咱們最經常使用的輸入文本內容是 input 與 textarea，使用 contenteditable 屬性後，能夠在div、table、p、span、body等等不少元素中輸入內容。若是想要整個網頁可編輯，能夠在 body 標籤內設置 contenteditable。contenteditable 已在 HTML5 標準中獲得有效的支持.app

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

execCommand函數

execCommand 讓咱們可以對 contenteditable 區域的內容作一些至關複雜的操做。若是你想了解更爲詳細的內容能夠看這裏：The Mozilla Docs。工具

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

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>

代碼下載

原文：http://www.admin10000.com/doc...