wangEditor的jQuery插件化
wangEditor是一款优秀的Web富文本编辑器。这篇随笔中讲述的wangEditor版本是2.1.22，由于它依赖于jQuery（作者打算在第三版中取消对jQuery的依赖），那么如果能使用$("#editor").wangeditor()的方式创建和获取编辑器，就再好不过了。为了达到这个目的，需要为jQuery定制一款插件，代码如下：
(function ($) {
// 用于存储所有编辑器实例的对象。由于wangEditor不支持从原始元素或其id获取已经创建好的编辑器实例，使用这个对象可以方便以后获取编辑器实例
var editors = {};
// 注册jQuery插件
$.fn.wangeditor = function () {
// 如果通过jQuery获取了多个元素，可以创建多个编辑器
for (var i = 0; i < this.length; i++) {
var id = this[i].id;
// 如果之前没有创建过对应的编辑器，则创建编辑器并放入编辑器实例存储对象
if (editors[id] == undefined) {
editors[id] = new wangEditor(id);
editors[id].create();
}
}
// 只返回第一个元素对应的编辑器实例。因此，如果要获取编辑器，使用的选择器应该只匹配一个元素，多余的元素将忽略
return editors[this[0].id];
};
})($);
下面写一个页面测试这款插件。在这个页面中包含了多个编辑器，可以验证这款插件支持多个编辑器的创建和单一编辑器实例的获取：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="Content/wangEditor/css/wangEditor.css" rel="stylesheet" />
</head>
<body>
<div id="editor1" class="editor">
<h3>wangEditor的jQuery插件化1</h3>
</div>
<div id="editor2" class="editor">
<h3>wangEditor的jQuery插件化2</h3>
</div> <button type="button" data-editor="1">显示内容1</button>
<button type="button" data-editor="2">显示内容2</button> <script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/wangEditor.js"></script>
<!-- 引入刚才编写的插件 -->
<script src="Scripts/jquery-wangeditor.js"></script> <script>
// 一次调用，创建多个编辑器
$(".editor").wangeditor(); $("button[data-editor]").click(function () {
// 用同样的方法获取单一编辑器实例，然后显示其文本内容
alert($("#editor" + $(this).data("editor")).wangeditor().$txt.text());
});
</script>
</body>
</html>
测试截图如下：
点击第二个按钮之后：
wangEditor的jQuery插件化的更多相关文章
- UEditor的jQuery插件化
UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...
- UEditor的jQuery插件化 -转
UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...
- 第四十三课：jQuery插件化
我们先来看一个最简单的例子: (function($){ $.fn.extend({ //把此插件添加到jQuery的原型上 pluginName:function(){ //插件的名字 ...
- 帮助更语义化的显示时间的jQuery插件 - tidyTime.js
来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15 显示成 ...
- 前端模板文件化jQuery插件 $.loadTemplates
工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- 一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
随机推荐
- 设计模式（二）单例模式Singleton（创建型）
几乎所有面向对象的程序中,总有一些类的对象需要是唯一的,例如,通过数据库句柄到数据库的连接是独占的.您希望在应用程序中共享数据库句柄,因为在保持连接打开或关闭时,它是一种开销.再如大家最经常用的IM, ...
- JS 用角度换东南西北
最近因为业务,正好需要用设备回传的角度值转成用户读得懂的文字形式 function toDirStr(num){ var num=parseInt(num) var N='北'; var E='东'; ...
- Intellij 快捷键
11ctrl+F12 类似于eclipse 的outline 显示出当前类的所有方法. ctrl+H 查看当前类或者方法的集成结构 ctrl+E 查看最近使用的文件 Ctrl+J 自动完成提示 C ...
- Ubuntu创建、删除文件与目录
"~"代表了用户主目录,即/home/帐户名.所以"/home/jv/下载"="~/下载" 创建文件和目录(文件夹) touch filen ...
- CSS3 background-size:cover/contain
background-size的cover和contain指定背景图片的自适应方式,只能对整张图片进行缩放. cover是拉伸图片使之充满元素,元素肯定是被铺满的,但是图片有可能显示不全. conta ...
- FZU 2086 餐厅点餐(模拟)
Problem 2086 餐厅点餐 Problem Description Jack最近喜欢到学校餐厅吃饭,好吃干净还便宜. 在学校餐厅,有a种汤,b种饭,c种面条,d种荤菜,e种素菜. 为了保证膳食 ...
- [MFC美化] SkinSharp使用详解2-SkinH.h函数介绍
SkinSharp功能强大,该皮肤库支持完全多种颜色改变等. 下面是静态链接库时的SkinH.h头文件: /*在Stdafx.h文件中加入如下语句 #include "SkinH.h&quo ...
- 著名清理软件(CCleaner) 5.24.5841 中文版
软件名称: 著名清理软件(CCleaner) 软件语言: 多国语言 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 5.7MB 图片预览: 软件简介: CCleaner的体积小, ...
- Labeling Balls(变种拓扑)
Labeling Balls Time Limit : 2000/1000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Tot ...
- CodeForces 706B Interesting drink
排序,二分. 将$x$数组从小到大排序,每次询问的时候只要二分一下位置就可以了. #pragma comment(linker, "/STACK:1024000000,1024000000& ...