####注意
**开发插件过程中，会用到编辑器提供的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);
});
});
})();
```
- 关于wangEditor
- 遇到问题如何解决和提问【重要】
- 开始使用
- 下载
- 创建页面
- 生成编辑器（使用ID）
- 生成编辑器（使用element）
- 调整尺寸
- 销毁与恢复
- 一个页面多个编辑器
- 内容处理
- 初始化内容
- 获取内容
- 追加内容
- 清空内容
- 用 editor.$txt 做其他内容处理
- onchange事件
- 禁用/启用
- 参数配置
- 自定义菜单
- 自定义颜色、字体、字号
- 自定义表情
- 切换语言
- 百度地图key
- 菜单栏吸顶
- 配置全屏的z-index
- 关闭浏览器打印log
- 关闭过滤javascript
- 关闭粘贴过滤样式
- 只粘贴纯文本
- 插入代码-配置默认语言
- 自定义编辑器样式
- 自定义颜色
- 自定义菜单UI
- 自定义表格、引用、代码的样式
- 代码高亮样式
- 图片上传
- 使用前必读
- 支持情况
- 配置说明
- log提示辅助排错
- 后台代码示例
- C#
- java - 例1
- java - 例2
- php
- nodejs
- python
- 自定义上传事件
- 集成plupload插件
- 集成七牛云存储
- 跨域上传
- 上传图片出错时的解决步骤
- 使用模块定义
- 使用require.js
- 使用seajs
- 使用webpack
- 插件开发
- 对象结构
- 常用API
- 全局API
- 对象API
- 基础API
- 选区API
- 命令API
- 扩展一个菜单
- 『缩进』菜单
- 『行高』菜单
- 『插入符号』菜单
- 开发一个插件
- 常见问题
- 关于markdown
- 关于上传附件
- 关于背景图片
- 关于显示压缩图片
- 集成到React
- 集成到angular
- 集成到vue.js
- 如何避免与项目中的css冲突
- xss过滤
- 如何插入视频链接
- 关于mobile端编辑器
- 查看源码第一行有空格