小伙伴们惊呆了！10行 JavaScript 实现文本编辑器

　　最近，我需要做一个非常基本的网页内容编辑功能。我不想使用 iframe ，我也不想要一个功能特别多的复杂编辑器，只需要很基本的内容编辑功能，例如粗体，斜体，列表，对齐等等。

您可能感兴趣的相关文章

分享九个不可思议的 WebGL 应用试验
2012年最经典的10款 HTML5 游戏集锦
35款非常优秀的基于 HTML5 网页游戏
20个惊艳的 HTML5 Canvas 应用试验
8个惊艳的 HTML5 和 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>

源码下载在线演示

您可能感兴趣的相关文章

让人惊叹的 Chrome 浏览器实验项目
分享21款丰富多彩的 HTML5 网页游戏
推荐10款优秀的 HTML5 在线设计工具
2012年最佳的 HTML5 应用和网站作品
29款基于 HTML 5 Canvas 的网页游戏

英文来源：World’s Simplest HTML5 WYSISYG Inline Editor

文章来源：梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】

小伙伴们惊呆了！10行 JavaScript 实现文本编辑器相关推荐

10个免费的javascript富文本编辑器（jQuery and non-jQuery）
本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介 Javascript富文本编辑器使我们添加. ...
android 富文本框架_五种JavaScript富文本编辑器，总有一款适合你
全文共2099字,预计学习时长4分钟也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...
如何为JavaScript选择文本编辑器
by Ayo Isaiah 通过Ayo Isaiah 如何为JavaScript选择文本编辑器 (How to choose a text editor for JavaScript) If you' ...
10.18.1 linux文本编辑器vim
vi和vim的区别编辑一个文本时,vi不会显示颜色,而vim会显示颜色,vi 有点类似windows记事本,简单,那么就是vim复杂编辑器,功能复杂,高亮,自动缩进(写shell/python脚本用 ...
Linux命令行下的文本编辑器
vi能是终端命令行里功能最强的文本编辑器了,但目前需要用到的只是文本编辑功能,与GCC.make等工具的整合应用现在还不需要,所以操作难度不大,习惯就好.Linux发行版所带的一般不是vi,而是vim ...
Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点
问题:单击按钮后内容可编辑区域失去焦点解决思路:在按钮上绑定的事件从@click 改为 @mousedown 事件.因为失去焦点事件是mousedown默认触发的,所以,在点击的按钮上阻止mouse ...
10个免费的jQuery富文本编辑器
原文地址:https://blog.csdn.net/lzwglory/article/details/17206689 Javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这 ...
JavaScript 所见所得文本编辑器 Froala Editor 4.0.17Crack
Froala Editor v4.0.17 清除格式工具现在可以从粘贴的内容中删除内联样式. 2023 年 1 月 24 日 - 9:07新版本特征清除格式工具现在可以从粘贴的内容中删除内联样式. ...

小伙伴们惊呆了！10行 JavaScript 实现文本编辑器

您可能感兴趣的相关文章

小伙伴们惊呆了！10行 JavaScript 实现文本编辑器相关推荐

最新文章

热门文章