UEditor的jQuery插件化

最新推荐文章于 2024-03-11 22:31:22 发布

dijiecongpuzh7582

最新推荐文章于 2024-03-11 22:31:22 发布

阅读量163

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhuxinghan/p/6059255.html

版权

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>

测试截图如下（已点击第二个按钮）：

转载于:https://www.cnblogs.com/zhuxinghan/p/6059255.html

dijiecongpuzh7582

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UEditor的jQuery插件化

UEditor本身并不依赖jQuery，但如果在项目中同时使用两者的话，可能会希望使用jQuery语法创建和获取编辑器实例。为此，需要为jQuery编写插件，代码如下：(function ($) { // 注册jQuery插件 $.fn.ueditor = function () { // 如果通过jQuery获取了多个元素，可以创建多个编辑...
复制链接

扫一扫