背景
我们日常平凡用到的浏览器编辑器功用都邑比较多，完成的代码逻辑也会异常庞杂，往往是作为一个零丁插件被引入进来的。然则，如今我只须要一个很基础的内容输入内容编辑的功用，如：粗体、斜体、列表、对齐等。那要怎么办，直接援用个插件太痴肥了。
借助 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>
