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>

测试截图如下(已点击第二个按钮):

时间: 2024-12-23 16:29:07

UEditor的jQuery插件化的相关文章

第四十三课:jQuery插件化

我们先来看一个最简单的例子: (function($){ $.fn.extend({     //把此插件添加到jQuery的原型上 pluginName:function(){   //插件的名字 return this.each(function(){     //遍历匹配元素的集合 //插件要实现的功能 }); } }); })(jQuery);   //传入jQuery对象 由于jQuery是集化操作($("div")会选择多个div元素进行操作),而我们的插件编写应该一个元素

原创jquery插件treeTable(转)

由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. 在网上找到了很多资料,发现treeTable方面的组件质量都不高,有些还不错样式不符合,性能也比较差.想想树表也挺简单的,不就是通过隐藏或者展现某些tr来实现嘛.于是乎,自己写一个. 2011年5月4号恰好放假一个下午,于是在家里风风火火开始构造自己的树表插件. 样式我就用了http://www.h

如何开发jQuery插件

一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(object) 可以理解为,为JQuery实例添加一个成员函数. 基本的定义与调用: //$.extend的定义 $.extend({ pluginName:function(){ //... } }); //$.extend的调用 $.pluginName(); //$.fn.extend的定义 $.fn

不定义JQuery插件 不要说会JQuery

二.普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义与调用: /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1:

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

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

写JQuery插件的基本知识

普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义与调用: 复制代码代码如下: /* $.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$

MVC项目插件化改造

现在正在做的项目是以长沙某个客户的需求为原型进行开发的,随着业务的拓展,其他城市相同行业的客户也有类似的需求,在进行投标时,每个客户都有自己的页面和功能要求,如果单纯用长沙客户的软件版本,无法完全满足标书要求,因此需要对项目进行改造,考虑采用MVC插件化方式. 现有项目使用的技术点主要是MVC+EF+jQuery,改造思路考虑将每一个功能模块抽取为一个插件,在主Web项目中引用各插件,并将插件的css.js.views等文件拷贝到主Web项目的Plugins文件夹下.当有新客户提出个性化需求时,

使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQuery UI,一个基于 jQuery 的 UI 工具箱,使创建漂亮的界面更为容易.本文同时也介绍了一些 jQuery 插件,可以加速 Web 开发并有助于创建我们所熟悉的,且流畅.直观.灵活的界面. 简介 如果您是一个传统桌面应用程序开发人员,并且正在转向开发 Web 应用程序,在学习 HTML

不定义JQuery插件,不要说会JQuery

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义