如何CKEditor自定义按钮插入服务端图片

这篇文章主要为大家详细介绍了CKEditor自定义按钮插入服务端图片的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

方法/步骤

CKEditor 富文本编辑器很好用，功能很强大，在加上支持服务端图片上传的CKFinder更是方便，

最近在使用CKFinder的时候发现存在很多问题，比如上传图片的时候，图片不能按时间降序排列，另外CKFinder是也是收费的，所以自己想实现一个简单的类似CKFinder的功能，

本节只讲在CKEditor实现服务器图片的插入插件实现方法。

CKEditor版本是 ## CKEditor 4.4.4

第一、定义插件

1.在ckeditor/plugins文件夹下,新建serverimg文件夹，

2.在serverimg下新建plugin.js 文件

小编就不一一演示了，直接放代码!

3.在serverimg下新建image，里面存放图标使用的图片pic.png

第二、定义插件中的对话框内容

1.在serverimg中新建dialogs文件夹，

2.在dialogs文件内，分别创建code.js (用于执行弹出对话框执行的js代码)和PicPreview.html(用于浏览服务器图片)

3.code.js 代码如下

4.说明，由于我在弹出的对话框中插入的是一个iframe，src正好是我自己做的一个浏览服务器图片的页面，当选中图片后，点击对话框中的确定按钮，即可获取图片路径，

最终包装成img ，插入到富文本编辑器里面 ，当然你可以做的更好，允许图片设置宽度和高度，这里就不在讲了。

第三、配置插件

上面的插件开发完成后，页面上并不会显示我们开发的插件，还需要配置下config.js，找到ckeditor文件下的config.js 打开，在配置里面增加config.extraPlugins = 'serverimg';

第四、最终效果