UEditor的jQuery插件化

時間 2019-11-30

原文原文鏈接

UEditor自己並不依賴jQuery，但若是在項目中同時使用二者的話，可能會但願使用jQuery語法建立和獲取編輯器實例。爲此，須要爲jQuery編寫插件，代碼以下：html

(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);
    };
})($);

下面寫一個頁面測試這款插件。在這個頁面中包含了多個編輯器，能夠驗證這款插件支持多個編輯器的建立和單一編輯器實例的獲取：jquery

<!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>