UEditor的jQuery插件化
UEditor本身并不依赖jQuery，但如果在项目中同时使用两者的话，可能会希望使用jQuery语法创建和获取编辑器实例。为此，需要为jQuery编写插件，代码如下：
(function ($) {
// 注册jQuery插件
$.fn.ueditor = function () {
// 如果通过jQuery获取了多个元素，可以创建多个编辑器
for (var i = 0; i < this.length; i++) {
// UEditor会自己管理各个编辑器实例，不会重复创建
UE.getEditor(this[i].id);
}
// 只返回第一个元素对应的编辑器实例。因此，如果要获取编辑器，使用的选择器应该只匹配一个元素，多余的元素将忽略
return UE.getEditor(this[0].id);
};
})($);
下面写一个页面测试这款插件。在这个页面中包含了多个编辑器，可以验证这款插件支持多个编辑器的创建和单一编辑器实例的获取：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script id="editor1" class="editor" type="text/html">
<h3>UEditor的jQuery插件化1</h3>
</script>
<script id="editor2" class="editor" type="text/html">
<h3>UEditor的jQuery插件化2</h3>
</script> <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="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.js"></script>
<!-- 引入刚才编写的插件 -->
<script src="Scripts/jquery-ueditor.js"></script> <script>
// 一次调用，创建多个编辑器
$(".editor").ueditor(); $("button[data-editor]").click(function () {
// 用同样的方法获取单一编辑器实例，然后显示其文本内容
alert($("#editor" + $(this).data("editor")).ueditor().getPlainTxt());
});
</script>
</body>
</html>
测试截图如下（已点击第二个按钮）：
UEditor的jQuery插件化的更多相关文章
- UEditor的jQuery插件化 -转
UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...
- wangEditor的jQuery插件化
wangEditor是一款优秀的Web富文本编辑器.这篇随笔中讲述的wangEditor版本是2.1.22,由于它依赖于jQuery(作者打算在第三版中取消对jQuery的依赖),那么如果能使用$(& ...
- 第四十三课：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 原型对 ...
随机推荐
- 分享php工作中遇到的一些探究和技巧【2】
1 如何定义linux和window通用的文件分隔符号 DIRECTORY_SEPARATOR : 目录分隔符,是定义php的内置常量.在调试机器上,在windows我们习惯性的使用"\& ...
- 讲解——Trie树（字典树）
Trie树(字典树) 一.引入 字典是干啥的?查找字的. 字典树自然也是起查找作用的.查找的是啥?单词. 看以下几个题: 1.给出n个单词和m个询问,每次询问一个单词,回答这个单词是否在单 ...
- 170116、centos6.4下nginx和ftp搭建图片服务器
一.需要的组件 图片服务器两个服务: Nginx(图片访问): 1.http服务:可以使用nginx做静态资源服务器.也可以使用apache.推荐使用nginx,效率更高. 2.反向代理 实现 负载均 ...
- volatile（C# 参考）
本文档已存档,并且将不进行维护. volatile(C# 参考) 若要了解有关 Visual Studio 2017 RC 的最新文档,请参阅 Visual Studio 2017 RC 文档. vo ...
- [MFC美化] SkinSharp使用详解1-使用方法
需要注意的是: 加载换肤后,程序关闭时,无需调用卸载皮肤接口,SkinSharp换肤库会自己完成清理工作.换肤时无需卸载皮肤,直接调用即可. 其DLL使用方法与前面几种皮肤库用法类似.如下: 1. 将 ...
- 手动为maven的本地仓库添加JAR
在要添加的jar所在的文件夹下打开黑屏 如添加Oracle的ojdbc6.jar 输入: mvn install:install-file -DgroupId=com.oracle -Dartifac ...
- Scala减少代码重复
高阶函数可以把其它函数当作函数参数,帮助我们减少代码重复,例如: object FileMatcher { private def fileHere = (new File(".\\file ...
- CUDA开发存储器运用（包括存储器之间的转存）
主机端内存(host memory) 主机端叶锁定内存(pinned memory) 显存 寄存器(register) 局部存储器(local memory) 共享存储器(shared memory) ...
- Qt 打开指定的文件
最近项目用到使用本地的office打开指定的文件,记录一下代码: QString fileName = QFileDialog::getOpenFileName(this, tr("Open ...
- 《C++反汇编与逆向分析技术揭秘》——观察各种表达式的求值过程
---恢复内容开始--- 加法: 示例: 常量相加,则在编译期间就计算出两个常量相加后的结果,直接将这个结果参与运算,减少了运行期的计算.当有变量参与运算时,会先取出内存中的数据,放入通用寄存器中,再 ...