开发一个插件

最后更新于:2022-04-01 23:43:22

####注意 **开发插件过程中,会用到编辑器提供的API,也需要了解编辑器的对象结构。这些请参见『插件开发 - 对象结构』、『插件开发 - 常用API - 全局API』、『插件开发 - 常用API - 对象API』** ------ ####如何引用到页面 将插件代码写到一个独立的js文件中,例如命名为`plugin.js`,编写完成后,要这样引用到页面中。 ```html

请输入内容...

``` ---- ####编写 `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 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-02-05_56b460d9da677.png) 这个插件的代码,可以在`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 = $('
'); var $triangle = $('
'); var $delete = $(''); var $zoomSmall = $(''); var $zoomBig = $(''); // 渲染到页面 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); }); }); })(); ```
';