UEditor本身并不依赖jQuery，但如果在项目中同时使用两者的话，可能会希望使用jQuery语法创建和获取编辑器实例。为此，需要为jQuery编写插件，代码如下：

(function ($) {

    // 注册jQuery插件

    $.fn.ueditor = function () {

        // 如果通过jQuery获取了多个元素，可以创建多个编辑器

        for (var i = ; i < this.length; i++) {

            // UEditor会自己管理各个编辑器实例，不会重复创建

            UE.getEditor(this[i].id);

        }

        // 只返回第一个元素对应的编辑器实例。因此，如果要获取编辑器，使用的选择器应该只匹配一个元素，多余的元素将忽略

        return UE.getEditor(this[].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</button>

    <button type="button" data-editor="">显示内容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插件化 -转的更多相关文章

  1. UEditor的jQuery插件化

    UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...

  2. wangEditor的jQuery插件化

    wangEditor是一款优秀的Web富文本编辑器.这篇随笔中讲述的wangEditor版本是2.1.22,由于它依赖于jQuery(作者打算在第三版中取消对jQuery的依赖),那么如果能使用$(& ...

  3. 第四十三课：jQuery插件化

    我们先来看一个最简单的例子: (function($){ $.fn.extend({     //把此插件添加到jQuery的原型上 pluginName:function(){   //插件的名字 ...

  4. 帮助更语义化的显示时间的jQuery插件 - tidyTime.js

    来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15  显示成 ...

  5. 前端模板文件化jQuery插件 $.loadTemplates

    工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...

  6. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  7. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  8. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  9. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

随机推荐

  1. DELL服务器r710配置RAID

    DELL服务器r710配置RAID: 1.开机后等待DELL图标出现,连续按ctrl+r,进入RAID配置界面: 2.进入RAID配置界面,如果是下面的这个界面,选择Disk group 0这项需要按 ...

  2. python之json&pickle

    用于序列化的两个模块: json:用于字符串和python数类型间进行转换 oickle:用于python特有的类型和python的数据类型间进行转换 json.pickle模块提供四个功能:dump ...

  3. Sklearn (一) 监督学习

    本系列博文是根据SKlearn的一个学习小结,并非原创!  1.直接学习TensorFlow有点不知所措,感觉需要一些基础知识做铺垫.  2.之前机器学习都是理论<Ng机器学习基础>+底层 ...

  4. android 开发 View _15 导入一张图片将它裁剪成圆形 与 paint图层叠加处理详解

    方法一: /* 实现思维是这样的: 1.首先拿到bitmap图片 2.得到bitmap图片的高度 宽度,并且计算好各个画图尺寸 3.创建一个空白的 bitmap图片: Bitmap output = ...

  5. gentoo Cataclysm - Dark Days Ahead

    gentoo 中安装 Cataclysm - Dark Days Ahead,使用web 下载稳定版的安装包,使用 tar 进行解压. 安装需要共享库:sdl2-mixer, 未完待续

  6. mac 安装软件

    一.安装spark 1.官网下载最新tar文件 2.解压 3.安装java开发环境 3.1.安装下载java 8  https://www.oracle.com/technetwork/java/ja ...

  7. DRF框架简介(第一天)

    1.drf框架全称 djangorestframework 1.如何安装drf框架: pip3 install djangorestframework #drf框架其实就是一个app称之为drf #d ...

  8. 003之MFCSocket异步编程（指针机制）

    002篇是采用传统方式创建,不适应动态的网络环境,服务器为客户端保留着断开连接时的套接字,不够灵活.而采用指针机制不仅可以更加灵活性,而且能使代码更集中,更具有条理性.将其转变成指针机制.功能及运行保 ...

  9. JDK、JRE、JVM的区别

    JDK: JDK(Java Development Kit)顾名思义它是给开发者提供的开发工具箱,是给程序开发者用的.它除了包括完整的JRE(Java Runtime Environment),Jav ...

  10. oracle优化技巧及实例（总结）

    1.关于exists和in in是循环的方式,在内存中处理, exists是执行数据库查询, select tpd.personaccountid,sum(nvl(tpd.CREDIT_SUM, 0) ...