10行 JavaScript 实现文本编辑器
CheriePende
7年前
<h2>背景</h2> <p>我们平时用到的浏览器编辑器功能都会比较多，实现的代码逻辑也会非常复杂，往往是作为一个单独插件被引入进来的。但是，现在我只需要一个很基本的内容输入内容编辑的功能，如：粗体、斜体、列表、对齐等。那要怎么办，直接引用个插件太臃肿了。</p> <p>借助 HTML5 特性，所有的工具都已经可用，所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。</p> <h2>开撸</h2> <p>你需要两样东西，第一是：</p> <p>contenteditable</p> <p>contenteditable 是 HTML 中的一个属性，设置 HTML标签的 contenteditable=“true” 时，即可开启该元素的编辑模式。contenteditable 的作用相当神奇，可以让 div 或整个网页，以及 span 等等元素设置为可编辑。</p> <p>我们最常用的输入文本内容是 input 与 textarea，使用 contenteditable 属性后，可以在div、table、p、span、body等等很多元素中输入内容。如果想要整个网页可编辑，可以在 body 标签内设置 contenteditable。contenteditable 已在 HTML5 标准中得到有效的支持.</p> <p>第二样东西是一个功能特殊的函数：</p> <p>execCommand</p> <p>execCommand 让我们能够对 contenteditable 区域的内容做一些相当复杂的操作。如果你想了解更为详细的内容可以看这里：The Mozilla Docs。</p> <p>从本质上讲， execCommand 有三个参数：</p> <pre> <code class="language-javascript">Command Name – 命令名称； ShowDefaultUI – 未实现，所以最好设置为 false； ValueArgument – 命令的参数；</code></pre> <p>多数情况下，ValueArgument 可以设置为 null，但有一种情况：当你要设置一行文本的标签的时候（h1，h2，p 等），你需要使用 formatBlock 命令，并把标签放到 ValueArgument 中。</p> <p>现在，事情就很简单了，我们把 exexCommand 要执行的命令放到 data-role 属性中，然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。核心代码其实就10行：</p> <pre> <code class="language-javascript">$(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; } }) });</code></pre> <p>完整代码：</p> <pre> <code class="language-javascript"><!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> <p> </p> <p>来自：https://segmentfault.com/a/1190000008454793</p> <p> </p>