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插件化的更多相关文章

  1. UEditor的jQuery插件化

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

  2. UEditor的jQuery插件化 -转

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

  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. Gpt转mbr

    1)Shift + F10 2)diskpart 3)list disk 4)select dist 0 5)clean 6)convert mbr [注]mbr常用于windows操作系统,而gpt ...

  2. iOS strong与weak的使用

    strong修饰的属性是强指针类型的,weak修饰的属性是弱指针类型的 ARC对于内存中的对象管理机制,当某个对象没有被强指针指向的时候,该对象就会被销毁. 所以不适当的使用strong和weak修饰 ...

  3. ssh中的 Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

    这个错误我整理了  半天才发现问题的存在. 尝试了网上的很多办法,但是最后都没有达到效果. 包括这两种: 第一种: web.xml种的配置 <filter> <filter-name ...

  4. ORALCE 编译过程卡死解决方法。

    --摘自网易博客 术士 在对存储过程进行test的时候,没有完全停止,就又在另外一个窗口,对它进行修改而且进行编译,出现了卡死现象. 用PLSQL Developer 在session里,找到这条se ...

  5. 在tableview的headerView中添加webView，webView自适应高度

    最近在项目中需要添加一个webView加载的页面,下面显示的是对这个webView所显示的内容的一个评论列表 ,列表要根据后台加载过来的HTML自适应的变化高度,tableview的cell在webV ...

  6. 【python标准库】内建函数

    abs(x) 返回一个数的绝对值.参数可以是普通的整数,长整数或者浮点数.如果参数是个复数,返回它的模. all(iterable) 如果iterable的所有元素为真(或者iterable为空), ...

  7. 键盘快速启动工具Launchy的简单使用技巧

    打开电脑面对林林总总的图标,找到对应的程序,快速启动显得尤为重要.这样有利于提高我们的效率. 好了,直接上图: 就是这款小巧的工具,界面如上. 接下来介绍这款工具的使用技巧. 1.安装成功后:打开工具 ...

  8. Abstraction elimination

    (本文不保证不误人子弟,切勿轻信) Unlambda指的是lambda计算中去掉lambda操作(does not have lambda(or abstraction) operation of t ...

  9. jQuery中的ajax使用详解

    $.ajax({   type : "get",   url : "http://www.w3school.com.cn/jquery/ajax_ajax.asp&quo ...

  10. C# 语言规范_版本5.0 (第16章 异常)

    1. 异常 C# 中的异常用于处理系统级和应用程序级的错误状态,它是一种结构化的.统一的和类型安全的处理机制.C# 中的异常机制非常类似于 C++ 的异常机制,但是有一些重要的区别: 在 C# 中,所 ...