之前一直是Fckeditor 在线编辑器,最近发现对Chorme 支持不是很友好,所以决定采用最新版本ckeditor 4.01版本。
为了保持和之前上传风格,我决定对ckeditor 进行再次改造。
和网上任何一个上传都不一样。纯自己想出来的。送给需要的同学。
首先是调用方式:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript"> window.onload = function() { CKEDITOR.replace('FContent');//FContent:这个对应文本域 }; //插入图片 并插入编辑器 function InsertHTML(s) { var editor = CKEDITOR.instances.FContent; //FContent:这个对应文本域 if (editor.mode == 'wysiwyg') { editor.insertHtml(s); } CKEDITOR.dialog.getCurrent().hide();//隐藏弹出层 }
注册JS:
config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'links' }, { name: 'insert' }, { name: 'forms' }, { name: 'tools' }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'others' }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] }, { name: 'styles' }, { name: 'colors' }, { name: 'UploadPic' } ]; config.extraPlugins = 'UploadPic';
定义插件:
(function () { CKEDITOR.plugins.add('UploadPic', { init: function(editor) { var pluginName = 'UploadPic'; CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/UploadPic.js'); editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName)); editor.ui.addButton('UploadPic', { label: '上传图片', command: pluginName, icon: CKEDITOR.plugins.getPath('UploadPic') + 'uploadpic.png' }); } }); })();
定义弹出层:
CKEDITOR.dialog.add("UploadPic", function (a) { a = a.lang.UploadPic; return { title: '上传图片', minWidth: 390, minHeight: 150, contents: [{ id: "tab1", label: "", title: "", expand: !0, padding: 0, elements: [{ type: "html", html: "<form action='/ckeditor/plugins/UploadPic/dialogs/upload.aspx' method='post' enctype='multipart/form-data' target='myiframe' style='margin-top:10px;'><input name='uploadimg' style='background: #fbfbfb;url(http://static.zcool.com.cn/images/txtBg.png) repeat-x left top;height: 36px;line-height: 36px;border: 1px solid #abadb3;font-size: 14px;padding: 0 5px;360px;' id='uploadimg' type='file' /><br><input name='submit' onclick='return check();' id='sumit' value='上传' type='submit'style='background: #fbfbfb;url(http://static.zcool.com.cn/images/txtBg.png) repeat-x left top;height: 36px; line-height: 36px; text-align:center; margin-top:10px; border: 1px solid #abadb3;font-size: 14px;padding: 0 5px;70px;' /></form><iframe name='myiframe' id='myiframe' width='100' height='100'frameborder='0' scrolling='yes' marginheight='0' marginwidth='0' ></iframe>"}]}], buttons: [CKEDITOR.dialog.cancelButton]} });
剩余一个是 上传接受页面,就随别接受下,同学可以根据的需求进行改动。
运行最好用IIS托管运行下
示例代码下载:ckeditor_upload.zip