CKeditor自定义右键菜单
一、在CKeditor的plugins目录中加入自定义的插件
我加入的是自定义的图片裁剪插件Cropper,目录结构如下:
二、在CKeditor的配置文件config.js中加入自定义的插件
加入自定义的插件,如果有多个自定义的插件,中间已逗号分割
// 加入自定义的插件
config.extraPlugins = 'cropper';
三、效果图
此时,在Ckeditor中就会出现自定义的图片裁剪插件的图标了
上传一张图片,然后在图片上右键,可以看到,此时的右键菜单中是没有我们自定义的图片裁剪插件的
我们需要在图片的右键菜单中加入自定义的图片裁剪插件
四、在右键菜单中加入自定义的图片裁剪 插件
在Cropper目录下的plugin.js中加入以下代码
CKEDITOR.plugins.add( 'cropper', {
init: function( editor ) {
editor.ui.addButton( 'cropper', {
label: '裁剪图片',
command: 'cropper',
toolbar: 'insert',
icon: this.path + 'icons/cropper.png' // 在toolbar中的图标
});
editor.addCommand( 'cropper', {
exec: function( editor ) {
// 业务代码
}
});
// 将图片裁剪添加到右键菜单中
if(editor.addMenuItem) {
editor.addMenuGroup("cropper");
editor.addMenuItem("cropper", {
label: "图片处理",
icon: this.path + 'icons/cropper.png',
command: "cropper",
group: "cropper"
})
}
if(editor.contextMenu) {
// 监听右键菜单事件
editor.contextMenu.addListener(function(element) {
// 如果是在图片上右键,才在右键菜单中显示图片裁剪功能
if(element.$.localName == "img") {
return {
cropper: CKEDITOR.TRISTATE_OFF
}
}
})
}
}
});
此时,在图片的右键菜单中就会加入我们自定义的图片裁剪插件了
点击右键菜单中的图片裁剪插件,会出现图片裁剪的裁剪框
至此,自定义的插件在右键菜单中添加成功了!