> 在创建编辑器时可以定义toolbars属性来扩展编辑器来支持更多的功能
toolbars属性是一个数组,他定义了编辑器的控制按钮,你可以去除一些不必要的按钮功能,也可以创建一个按钮
编辑器自带有以下按钮
~~~
insertText /*插文字'*/
insertImage /*插图片'*/
insertLink /*链接'*/
insertHr /*水平线'*/
editText /*文字'*/
delete /*删除'*/
undo /*撤销'*/
cancel /*取消'*/
~~~
我们这里先举例创建一个只有文字、删除、撤销、取消按钮的编辑器(下面讲解如何新增一个新的按钮)
~~~
new Eleditor({
el: '#article-body',
upload:{
server: '/upload.php',
},
toolbars: [
'insertText',
'editText',
'delete',
'undo',
'cancel'
],
});
~~~
效果如下
![](https://box.kancloud.cn/816d7346d1d8e843bdd087c23d426947_455x202.jpg)
## 新建按钮
我们除了可以操作排序自带的功能按钮外,还可以新增一个操作按钮,例如上传视频、插入表情等
> 我们这里演示如何新建一个插入商品按钮逻辑
~~~
var _artEdr = new Eleditor({
el: '#article-body',
upload:{
server: '/upload.php',
},
toolbars: [
'insertText',
'editText',
'insertImage',
//自定义一个按钮对象
{
id: 'insertShop',//不能重复,此id可用于定义按钮样式,例如创建后按钮类为Eleditor-insertShop
//tag: 'img', //指定标签显示按钮,逗号分隔,默认不指定
name: '插产品',
handle: function(_select, _controll){//回调有两个参数,分别是已选择的编辑dom对象和当前控制按钮对象
/*这里省略部分逻辑,主要是显示产品列表弹窗,并且选择返回*/
...
...
var _selectShop = {"name": "药膏","price": "35.6"};/*举例通过选择拿到产品信息*/
/*注意!!!在编辑修改内容前务必通过saveState保存下状态,这样编辑器撤销按钮才会生效,否则无法撤销修改*/
_artEdr.saveState();
/*.getEditNode()拿到的是一个jq节点对象,插入到已选择的节点后面*/
_artEdr.getEditNode().after( $('<p>'+__selectShop.name+' ¥'+_selectShop.price+'</p>') );
}
},
'insertLink',
'insertHr',
'delete',
'undo',
'cancel'
]
});
~~~