CKEditor富文本编辑器使用简单，功能强大，在服务器端增加支持图片上传的CKFinder更方便。

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

本节只讨论服务器图片在CKEditor中的插件实现。

CKEditor的版本是## CKEditor 4.4.4

首先，定义插件

1.在文件夹ckeditorplugins下创建一个新的serverimg文件夹。

2.在serverimg下创建一个新的plugin.js文件，

ckeditor . plugins . add(' serverimg '，{ requires 3360[' dialog ']，lang: ['en']，init:函数(编辑器){ editor.addCommand('serverimg '，new ckeditor . dialogcommand(' serverimg '))；Editor.ui.addbutton ('serverimg '，{label: '插入服务器图片'，command:' serverimg '，icon : this . path ' images/pic . png '，toolbar : ' insert ' })；CKEDITOR.dialog.add('serverimg '，this . path ' dialogs/code . js ')；} });3.在serverimg下创建一个新图像，它存储图标使用的图像pic.png

其次，在插件中定义对话框的内容

1.在serverimg中创建新的dialogs文件夹。

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

3.code.js代码如下

CKEDITOR.dialog.add('serverimg '，函数(编辑器){ var timestamp=Math.round(新日期()。getTime()/1000)；var ckeditorPage='././ImgMgr/ImgBrowser.aspx？from=ckeditortimestamp=' timestamp；返回{title:' insert code '，minwidth : 800，min have : 600，contents : [{id :' tab 1 '，标签: ' '，title: ' '，expand : true，padd : 0 0，element 3360[{ type : ' html '，html : ' iframe id=' img _ browser ' name=' img _ browser ' SRS高度：600 px；划水：0；//style=' width :800 px；Height :600px'}]}]，onok : function(){//插入富文本编辑器内容窗口. frames[' img _ browser ']. document . getelementbyid(' HF _ imgsrc ')；//var HF=document . getelementbyid(' img _ browser '). content window . document . getelementbyid(' HF _ img src ')；if (hf！=null){ var IMgsrc=HF . value；editor . insert HTMl(' img src=' ' imgSrc ' '/')；//将select插入编辑器} else {alert('hf为null ')；} }，//onHide:函数(){ document . getelementbyid(' img _ browser '). content document . location . reload()；}，//resizable: CKEDITOR。DIALOG _ RESIZE _ HEIGHT }；});4.注意，由于我在弹出的对话框中插入了一个iframe，所以src只是一个浏览自己制作的服务器图片的页面。选择图片后，点击对话框中的确定按钮，获取图片路径。

最后，它被打包成img并插入到富文本编辑器中。当然，你可以做得更好，允许设置图片的宽度和高度，所以我在这里就不说了。

第三，配置插件

上述插件开发完成后，我们开发的插件不会显示在页面上，但是我们需要配置config.js，在ckeditor文件下找到config.js并打开，在配置中添加config . extra plugins=' serverimg '；

第四，最终效果

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。