jquery 建议编辑器
但事实证明，它是如此简单，让我十分惊讶！借助 HTML5 特性，所有的工具都已经可用，所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。
你需要两样东西，第一是：
|
1
|
contenteditable |
contenteditable 是 HTML 中的一个属性，设置 HTML标签的 contenteditable=“true” 时，即可开启该元素的编辑模式。contenteditable 的作用相当神奇，可以让 div 或整个网页，以及 span 等等元素设置为可编辑。
我们最常用的输入文本内容是 input 与 textarea，使用 contenteditable 属性后，可以在div、table、p、span、body等等很多元素中输入内容。如果想要整个网页可编辑，可以在 body 标签内设置 contenteditable。contenteditable 已在 HTML5 标准中得到有效的支持.
第二样东西是一个功能特殊的函数：
|
1
|
execCommand |
execCommand 让我们能够对 contenteditable 区域的内容做一些相当复杂的操作。如果你想了解更为详细的内容可以看这里：The Mozilla Docs。
从本质上讲， execCommand 有三个参数：
Command Name – 命令名称；
ShowDefaultUI – 未实现，所以最好设置为 false；
ValueArgument – 命令的参数；
多数情况下，ValueArgument 可以设置为 null，但有一种情况：当你要设置一行文本的标签的时候（h1，h2，p 等），你需要使用 formatBlock 命令，并把标签放到 ValueArgument 中。
现在，事情就很简单了，我们把 exexCommand 要执行的命令放到 data-role 属性中，然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。核心代码其实就10行：
<!DOCTYPE html>
<html>
<head>
<title>Editable WYSIWYG</title>
<link href="http://www.bootcss.com/assets/dist/css/bootstrap.min.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="http://www.bootcss.com/assets/js/jquery.js"></script>
<script src="http://www.bootcss.com/assets/dist/js/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>
jquery 建议编辑器的更多相关文章
- 10 个免费的 jQuery 可视化编辑器插件
富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...
- 第一百九十节，jQuery，编辑器插件
jQuery,编辑器插件 学习要点: 1.编辑器简介 2.引入 uEditor 编辑器(Editor),一般用于类似于 word 一样的文本编辑器,只不过是编辑为 HTML 格式的.分类纯 JS 类型 ...
- JQuery 在线编辑器和手册
JQuery 在线编辑器 JQuery 在线编辑器 JQuery 菜鸟教程 手册 JQuery 菜鸟教程 手册
- jQuery 文本编辑器插件 HtmlBox 使用
0.htmlbox下载地址:http://download.csdn.net/detail/leixiaohua1020/6376479 1.引入头文件 <script src="li ...
- Jquery 概念性内容编辑器
概念性jQuery内容编辑器,这是一款非常有特色的jQuery编辑器,该编辑器支持文字.列表.视频.引用等功能,是一款小巧简洁,富有个性化的jQuery内容编辑器插件. 代码: <!doct ...
- 10个免费的javascript富文本编辑器（jQuery and non-jQuery）
祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...
- Electron中Jquery的引入方式
原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...
- 强烈推荐240多个jQuery插件提供下载
jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的 ...
- 240多个jQuery插件
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 ...
随机推荐
- jquery动态改变my97日期格式
$('#qsrq').unbind('focus'); $('#zzrq').unbind('focus'); $('#qsrq').bind('focus', function () { Wdate ...
- Android 实现简单音乐播放器（二）
在Android 实现简单音乐播放器(一)中,我介绍了MusicPlayer的页面设计. 现在,我简单总结一些功能实现过程中的要点和有趣的细节,结合MainActivity.java代码进行说明(写出 ...
- hexo问题篇(偶尔抽抽疯)
hexo安安稳稳的跑了很久,然后 ....让人心碎的hexo问题,华丽丽的摔倒在坑里,只因update了hexo version最是哪一句 hexo server让人欲哭无泪 -问题场景 设备: Ma ...
- Java 7 Concurrency Cookbook 翻译 序言
在日常的Java代码开发过程中,很难免地有对多线程的需求,掌握java多线程和并发的机制也是Java程序员写出更健壮和高效代码的基础.笔者找寻国内已出版的关于Java多线程和并发的的中文书籍和翻译书籍 ...
- 从输入 URL 到浏览器接收的过程中发生了什么事情？
从输入 URL 到浏览器接收的过程中发生了什么事情? What really happens when you navigate to a URL 上面两篇文章都解读的很好,值得阅读. 接下来在总结一 ...
- C++基础知识（2）---函数
c++中的函数和C语言中的函数相比,增加了许多新的语法与功能.在这里总结一下c++中常用的引用函数,函数重载和内联函数. 1 引用参数 引用参数最常用的一个例子就是 交换 两个数,如下 void s ...
- (转)android中颜色矩阵colormatrix
原文地址:http://www.cnblogs.com/menlsh/archive/2013/02/03/2890888.html 在Android中,对图像进行颜色方面的处理,如黑白老照片.泛黄旧 ...
- php之CI框架多语言的用法
public function index() { // 加载语言包,可以加载多个 $this->lang->load('email'); echo $this->lang-> ...
- Python之列表、字符串、元组和字典的基本用法
1 模块初识 Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的Python库支持,以后的课程中会深入讲解常用到的各种库,现在,我们先来象征性的学2个简单 ...
- Linux nohup 程序后台运行
&方式: Unix/Linux下一般想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/local/my ...