最近，我需要做一个非常基本的网页内容编辑功能。我不想使用 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. 【WP 8.1开发】如何把自定义字体塞进应用里

    或许,系统自带的字体不足以体现应用程序的魅力,对于表现极强的汉字来说,更是如此.这时候,我们就会想,要是能把网上下载的艺术字体塞到应用包中,那岂不美哉?那么,这可以实现吗?答案是Yes的. 接下来,阿 ...

  2. How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class

    This post will cover the basic setup and creation of an application with web content for iPhone that ...

  3. Cwinux源码解析（三）

    我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. Cwinux源码解析(三)

  4. 替换变量&和&&

    替换变量可看作是占位符 一. 单个&符号替换 SQL语句中最基本.最普遍元素替换形式是单个&符号替换.&符号是用来在语句中指定替换变量的符号.当执行语句时,Oracle服务器处 ...

  5. tomcat匹配Servlet的流程(原创)

  6. Datatables 在asp.net mvc中的使用

    前言 最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...

  7. Android自定义ImageView圆形头像

    效果图: 代码如下: RoundImageView.java import cn.comnav.evaluationsystem.R; import android.content.Context; ...

  8. SQL SERVER 内存分配及常见内存问题 简介

    一.问题: 1.SQL Server 所占用内存数量从启动以后就不断地增加: 首先,作为成熟的产品,内存溢出的机会微乎其微.对此要了解SQL SERVER与windows是如何协调.共享内存.并且SQ ...

  9. asp.net中打印指定控件内容

    1.写一个PrintHelper类using System;using System.Data;using System.Configuration;using System.Web;using Sy ...

  10. 【转载】谷歌酝酿将苹果Swift作为安卓APP主要开发语言

    TNW中文站 4月8日报道 安卓操作系统的软件开发语言是Java,而在过去几年中,有关Java的版权,谷歌(微博)和甲骨文之间发生了长期的诉讼.最新外媒消息称,谷歌正在考虑将苹果开发的Swift作为未 ...