####注意 **開發插件過程中，會用到編輯器提供的API，也需要了解編輯器的對象結構。這些請參見『插件開發 - 對象結構』、『插件開發 - 常用API - 全局API』、『插件開發 - 常用API - 對象API』** ------ ####如何引用到頁面 將插件代碼寫到一個獨立的js文件中，例如命名為`plugin.js`，編寫完成后，要這樣引用到頁面中。 ```html <div id="div1"> <p>請輸入內容...</p> </div> <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../dist/js/wangEditor.min.js"></script> <!--注意，plugin.js 要引用在 wangEditor.min.js 之后--> <script type="text/javascript" src="../dist/js/plugin.js"></script> <script type="text/javascript"> var editor = new wangEditor('div1'); editor.create(); </script> ``` ---- ####編寫 `plugin.js` 做一個demo 在`plugin.js`中編寫代碼，做一個demo：點擊編輯區域的圖片時，彈出該圖片的`url`。代碼如下： ```js (function () { // 獲取 wangEditor 構造函數和 jquery var E = window.wangEditor; var $ = window.jQuery; // 通過 E.plugin 注入插件代碼 E.plugin(function () { // 此處的 this 指向 editor 對象本身 var editor = this; var $txt = editor.$txt; $txt.on('click', 'img', function (e) { var $img = $(e.currentTarget); alert($img.attr('src')); }); }); })(); ``` ----------- ####實際案例 wangEditor編輯器本身的許多功能都是使用插件機制開發的，例如圖片、表格的toolbar  這個插件的代碼，可以在`wangEditor.js`中搜索 `// 編輯器區域 table toolbar` 來找到源碼。 目前該插件的源碼如下（**以搜索到的源碼為準**） ```js // 編輯器區域 table toolbar (function () { // 獲取 wangEditor 構造函數和 jquery var E = window.wangEditor; var $ = window.jQuery; E.plugin(function () { var editor = this; var txt = editor.txt; var $txt = txt.$txt; var $currentTable; // 用到的dom節點 var isRendered = false; var $toolbar = $('<div class="txt-toolbar"></div>'); var $triangle = $('<div class="tip-triangle"></div>'); var $delete = $('<a href="#"><i class="wangeditor-menu-img-trash-o"></i></a>'); var $zoomSmall = $('<a href="#"><i class="wangeditor-menu-img-search-minus"></i></a>'); var $zoomBig = $('<a href="#"><i class="wangeditor-menu-img-search-plus"></i></a>'); // 渲染到頁面 function render() { if (isRendered) { return; } // 綁定事件 bindEvent(); // 拼接 渲染到頁面上 $toolbar.append($triangle) .append($delete) .append($zoomSmall) .append($zoomBig); editor.$editorContainer.append($toolbar); isRendered = true; } // 綁定事件 function bindEvent() { // 統一執行命令的方法 var commandFn; function command(e, callback) { if (commandFn) { editor.customCommand(e, commandFn, callback); } } // 刪除 $delete.click(function (e) { commandFn = function () { $currentTable.remove(); }; command(e, function () { setTimeout(hide, 100); }); }); // 放大 $zoomBig.click(function (e) { commandFn = function () { $currentTable.css({ width: '100%' }); }; command(e, function () { setTimeout(show); }); }); // 縮小 $zoomSmall.click(function (e) { commandFn = function () { $currentTable.css({ width: 'auto' }); }; command(e, function () { setTimeout(show); }); }); } // 顯示 toolbar function show() { if ($currentTable == null) { return; } $currentTable.addClass('clicked'); var tablePosition = $currentTable.position(); var tableTop = tablePosition.top; var tableLeft = tablePosition.left; var tableHeight = $currentTable.outerHeight(); var tableWidth = $currentTable.outerWidth(); // --- 定位 toolbar --- // 計算初步結果 var top = tableTop + tableHeight; var left = tableLeft; var marginLeft = 0; var txtTop = $txt.position().top; var txtHeight = $txt.outerHeight(); if (top > (txtTop + txtHeight)) { // top 不得超出編輯范圍 top = txtTop + txtHeight; } // 顯示（方便計算 margin） $toolbar.show(); // 計算 margin var width = $toolbar.outerWidth(); marginLeft = tableWidth / 2 - width / 2; // 定位 $toolbar.css({ top: top + 5, left: left, 'margin-left': marginLeft }); } // 隱藏 toolbar function hide() { if ($currentTable == null) { return; } $currentTable.removeClass('clicked'); $currentTable = null; $toolbar.hide(); } // click table 事件 $txt.on('click', 'table', function (e) { var $table = $(e.currentTarget); // 渲染 render(); if ($currentTable && ($currentTable.get(0) === $table.get(0))) { setTimeout(hide, 100); return; } // 顯示 toolbar $currentTable = $table; show(); // 阻止冒泡 e.preventDefault(); e.stopPropagation(); }).on('click keypress scroll', function (e) { setTimeout(hide, 100); }); E.$body.on('click keypress scroll', function (e) { setTimeout(hide, 100); }); }); })(); ```