10行 JavaScript 實現文本編輯器
背景
我們平時用到的瀏覽器編輯器功能都會比較多，實現的代碼邏輯也會非常復雜，往往是作為一個單獨插件被引入進來的。但是，現在我只需要一個很基本的內容輸入內容編輯的功能，如：粗體、斜體、列表、對齊等。那要怎么辦，直接引用個插件太臃腫了。
借助 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></code></pre>
來自：https://segmentfault.com/a/1190000008454793