ckeditor自定义按钮方法.pdf

在ckeditor 中使⽤⾃定义上传插件 ckeditor的上传组建ckfinder收费，且不能满⾜⾃⼰项⺫的需求（有些功能⽤不上，有些功能 ⼜没有）。决定⾃⼰在现有的组件基础上改进⼀款符合⾃⼰要求的上传组件。 改进模板为ckeditor⺴站上的⽰例：abbr组建 配置步奏： 下载最新版的ckeditor包括：（lang、plugins、skins ⺫录以及config.js、build-config.js、 sytles.js）。 为了能够是ckeditor能够兼容jquery ，还要加上adapters ⺫录。 在需要使⽤的⻚⾯中引⽤如下语句： $(document).ready(function(){ CKEDITOR.replace( editor1); }）； 其中‘editor’是： textarea id=editor1 name=editor1/textarea 的id号。 这样在线编辑系统就可以⼯作了。 下⾯将加⼊⾃⼰编写的组建 ⾸先讲ckeditor官⺴下载的abbr ⺫录拷⻉到plugins ⺫录内。因为要使⽤⾃⼰的对话框，所以 删除到⾥⾯原有的dialogs ⺫录。 下⼀步编辑abbr ⺫录下⾯的plugin.js⽂件： 在ckeditor 中使⽤⾃定义上传插件 (function () { //Section 1 : 按下⾃定义按钮时执⾏的代码 var a = { exec: function (editor) { show();//这个函数是需要在运⾏ckeditor组建的⻚⾯中定义的函数。功能是执⾏当按 下⾃定义按钮后该执⾏的操作。⽐如弹出对话框等操作。 } }, b = abbr;//这⾥是组建的名称 CKEDITOR.plugins.add(b, {icons:abbr, init: function (editor) { editor.addCommand(b, a); editor.ui.addButton(Abbr, { label: 添加图⽚, //⿏标移动到按钮上出现的提⽰。 command: b }); } }); })(); 回到添加CKeditor组建的⻚⾯先引⼊如下引⽤： link href=css/custom-theme/jquery-ui-1.10.2.custom.css rel=stylesheet// ⾃定义对话 框需要的css⽂件。 script src=js/jquery-1.9.1.js/script script src=js/jquery-ui-1.10.2.custom.js/script/jquery ui ⾃定义对话框需要它 script src=ckeditor.js/script//ckeditor必要的引⽤ script src=adapters/jquery.js/script//保证在ckeditor 中能够使⽤jquery 还要加⼊如下函数： $(document).ready(function(){ CKEDITOR.replace( editor1, { extraPlugins: abbr //allowedContent: p // Only paragraphs will be accepted. }); 修改显⽰在线编辑器的函数，加⼊extraPlugins节，如果加⼊多个⾃定义插件每个插件⽤逗 号隔开。 function show() { var a = CKEDITOR.instances[editor1].getData();//获取编辑器⾥⾯的⽂本。 $(#mydia).dialog(open) ；//打开⼀个对话框 } 这个函数就是刚才插件中提到的那个show函数，此处是它的实现。这⾥只是测试没有写具 体的功能。⾃当抛砖引⽟。 下⾯还有⼀些相关的函数⼀并记录： 在ckeditor 中使⽤⾃定义上传插件 $(#mydia).dialog({ height: 300, width: 200, autoOpen: false, modal: true });