ckeditor自定义插件使用方法详解

ckeditor是一款功能很强大的富文本编辑的工具，给我们提供了绝大多数功能，满足我们日常开发所用，但由于特殊情况，可能会需要修改ckeditor的插件凯迪特。提供了给我们很方便扩展插件的接口。

最经由于项目的需要，需要重写ckeditor的上传图片的功能，以下是自定义图片上传功能的部分代码：

1、在ckeditor/plugins/目录下新建编辑上传目录，用来存放自定义插件；在该目录下新建目录形象用来存放自定以图片，在形象目录下放入插件图片image.png .

2、在编辑上传目录下新建plugin.js:

（函数(){ var a={ exec:函数（编辑器){ //调用jsp中的函数弹出上传框，var url='./查看/文件上传/上传。JSP '；openDialog({ //openDialog打开一个新窗口标题： '插入图片，url: url，height: 600，width: 900，回调函数：(){ })；} }，b=' editoruploadckeditor。插件。添加('编辑器上传'，{ init :函数(编辑器){ editor。addcommand(b，a))；编辑。ui。添加按钮('编辑器上传'，{ label: '添加图片', //鼠标悬停在插件上时显示的名字图标： '插件/编辑器上传/图像/图像。png '，//自定义图标的路径命令： b })；} });})();在上面代码中，新建了一个upload.jsp页面用来上传图片，使用了openDialog弹出一个新的窗口，设置了弹出框的高度和宽度CKEDITOR.plugins.add将自定义的编辑上传加入到ckeditor中。

下面是部分upload.jsp页面代码：

div id=' main content '/div class=' box ' table class=' m-table ' col group col width=' 20% '/col width=' 80% '//col group tr TD style='垂直-对齐： top'label class='module-name '图片说明/label/td td ul li1、《PC首页轮播图片》长宽为666250显示效果最好；《APP首页轮播图片》 长宽为422262显示效果最好；/li li、图片提交才会在首页生效；/Li/ul/TD/tr/table/div div id=' Pictures ' class=' Detailwrapper no add ' style=' display : none；''高度：自动'输入id='hidPicturesStatus '类型='隐藏'值='0'/输入id=' hidCurrPictures '类型='隐藏'值=''/输入id=' hiddictionpromission '类型='隐藏'值=''/表tr TD div id='文件队列'/div id=' picWrapper '/div a id=' fake-DLG-big pic ' href=' JavaScript : void(0)' style=' display : none；/a div id=' DLG-BigPic ' class=' PopImg ' style=' display : none；a class=' left BtN ' href=' JAVAScript : void(0)'/a class=' right BtN ' href=' JAVAScript : void(0)'/a class=' closeIMgbtn ' href=' JAVAScript : void(0)'/a div class=' IMglist ' ul/ul/div/div class=' validation-summary-valid ' ul Li style=' display 3360 none '/Li/ul/div批量上传/button button id=' submit ' class=' BTN BTN-primary ' style='垂直-对齐：顶部；线高：23 px宽度宽度：112px '高度： 35px '提交照片/button /div/divupload.jps页面部分的射流研究…代码：

//提交照片photoAskDetail。submit=function(){ var pictures=window。picmanager。_ GetPictures()；if (pictures.length 1) { alert('请至少上传一张图片');返回false}表示(图片中的var I){ var IMgpath=' img src=' staticfilerroot pictures[I].URL ' '/'；var元素=窗口。父母。CKEDITOR。多姆。元素。create from HTMl(IMgpath)；窗户。父母。凯迪特。实例。编辑内容。插入元素(元素);}家长。close dialog(false)；}上面代码中，可以上传多张照片，分别将照片放入到ckeditor中。配置ckeditor的config.js:

配置。额外插件=(配置。额外的插件？编辑器上传' : '编辑器上传')；凯迪特。editor config=function(config){ config。' font _ name='宋体/宋体；黑体/黑体；仿宋/仿宋_ GB2312楷体/楷体_ GB2312隶书/隶书；幼圆/幼圆；微软雅黑/微软雅黑；config.font _ namesconfig。语言=' zh-cn配置。额外插件=(配置。额外的插件？行高' : '行高')；配置。额外插件=(配置。额外的插件？编辑器上传' : '编辑器上传')；凯迪特。配置。line height _ size=ckeditor。配置。行高_大小' 30px '；config.height=650config。toolbarcancollapse=trueconfig.uiColor=' # 90B8E9配置工具栏="完整";配置。toolbar _ Full=[{ name : ' document '，item :[' Source '，'-'，' Save '，' NewPage '，' DocProps '，' Preview '，' Print '，'-'，' Templates' ] }，{ name: 'clipboard '，item :[' Cut '，' Copy '，' PasteText '，' PasteFromWord '，'-'，' Undo '，' Redo' ] }，{ name: ' links '，item 33:[' Link '，' Unlink ' }，{ config将编辑上传插件加入到ckeditor中。以下是实现的部分截图：

实现总结：在自定义插件过程中，必须把原插件的图片插入的功能给打开，负责上传的图片不会被放入到ckeditor中，图片地址会被自动的过滤掉。这可能是ckeditor版本的病菌导致。有解决方案的欢迎指导。

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