標籤：meta 編寫 註冊 包含 ges 代碼 編輯器 data 驗證
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>
測試如下（已點擊第二個按鈕）：
UEditor的jQuery外掛程式化
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
