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

您可能感兴趣的相关文章

　　用谷歌搜索找了很久，发现所有的插件都是功能太复杂，不是我想要的。所以，我决定我自己来实现需要的编辑功能。刚开始我觉得应该要花费很多的时间，因为我想象内容编辑功能应该是很复杂的。

　　但事实证明，它是如此简单，让我十分惊讶！借助 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>

　　

源码下载      在线演示

您可能感兴趣的相关文章

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

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

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

小伙伴们惊呆了！10行 JavaScript 实现文本编辑器的更多相关文章

  1. 10行 JavaScript 实现文本编辑器

    背景 我们平时用到的浏览器编辑器功能都会比较多,实现的代码逻辑也会非常复杂,往往是作为一个单独插件被引入进来的.但是,现在我只需要一个很基本的内容输入内容编辑的功能,如:粗体.斜体.列表.对齐等.那要 ...

  2. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  3. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...

  4. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  5. Javascript富文本编辑器

    分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...

  6. 10.18.1 linux文本编辑器vim

    vi和vim的区别 编辑一个文本时,vi不会显示颜色,而vim会显示颜色,vi 有点类似windows记事本,简单,那么就是vim复杂编辑器,功能复杂,高亮,自动缩进(写shell/python脚本用 ...

  7. javascript 简易文本编辑器

    转载请注明出处:http://www.cnblogs.com/enzozo/p/4357031.html 写在前面: 本文本编辑器具备功能:选择字体大小.颜色.加粗.斜体.下划线.点击 'Submit ...

  8. JavaScript 富文本编辑器

    WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...

  9. 65行 JavaScript 代码实现 Flappy Bird 游戏

    飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...

随机推荐

  1. CSS裁剪clip

    × 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...

  2. Android开发之广播

    广播是Android开发中的一个重要的功能,在Android里面有各式各样的广播,比如:电池的状态变化.信号的强弱状态.电话的接听和短信的接收等等,现在给大家简单介绍一下系统发送.监听这些广播的机制. ...

  3. Cocos2d-x 3.2 学习笔记（十三）CocoStudio UI编辑器 by 保卫萝卜

    关于编辑器部分研究的不多,但基本能使用.最近时间不是很多,因此写blog的次数越来越少了.自从玩了<保卫萝卜>时候一直想要写一下,同时练下手感.基本的结构已经写的差不多了,主要完善写UI和 ...

  4. 使用office生成PDF文件

    网络上有很多word转pdf的软件,功能效果不尽相同,对于想要把word转换成pdf格式的网友来说,一款实用强大的工具是必不可少的,踏破铁鞋无觅处,原来office2010就有符合你要求的功能.PDF ...

  5. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  6. Jsp字符编码过滤器

    通过此过滤器,可以实现统一将编码设置为UTF-8. 1.首先在web.xml中配置,添加如下代码: <!-- 过滤器 --> <filter> <filter-name& ...

  7. Eclipse10个最有用的快捷键[From: Internet]

    1. ctrl+shift+r:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xml ...

  8. Windows Azure Platform Introduction (11) 了解Org ID、Windows Azure订阅、账户

    <Windows Azure Platform 系列文章目录> 了解和掌握Windows Azure相关的基础知识是非常重要的. 问题1:什么叫做Org ID Org ID是Azure C ...

  9. Windows Azure Virtual Machine (33) Azure虚拟机删除重建

    <Windows Azure Platform 系列文章目录> 注意:本文介绍的重建Azure虚拟机,必须在同一个订阅内删除重建,必须在同一个订阅内删除重建,必须在同一个订阅内删除重建. ...

  10. [SDK2.2]Windows Azure Virtual Network (3) 创建AD Server并添加至Virtual Network

    <Windows Azure Platform 系列文章目录> 在之前的文章中,笔者已经向大家介绍了如何创建一个简单的Azure Virtual Network. 本章我将创建一台域服务器 ...