ckeditor配置大全.docx

前言因为项目中在传输大数据时，需要各种格式的数据，所以在页面选择了使用ckeditor编辑器，我是从官网下载的最新的版本，经过5天的奋战，终于搞定，实现了ckeditor的基本配置和自定义的图片上传功能，善于总结，才能进步嘛，所以写下此篇，希望能帮到需要的人软件准备Ckeditor：ckeditor_3.6.3下载地址去官网吧 呵呵 我懒得写了 百度下 就可以找到jquery：jquery-1.2.7官网下载吧 版本无所谓的 这个是我用的版本ajaxfileupload.jsjquery文件上传插件 官网下载吧ckeditor配置1. 把ckeditor文件夹放到自己工程的js目录下，然后在自己需要ckeditor的页面引入：新建一个文本域放置编辑器：通过js代码把ckeditor编辑器放置到上面的文本域中：var editor = CKEDITOR.replace(content);现在访问这个页面，可以看到下图：文本域已经被编辑器替换。2. 通过config.js来配置编辑器的外观、语言显示、按钮显示等等。我的配置文件如下：CKEDITOR.editorConfig = function( config )/ Define changes to default configuration here. For example:config.language = zh-cn;/ config.uiColor = #AADC6E;/ 设置宽高config.width = 860;config.height = 300;config.skin = v2;/共有3中皮肤可选择：kama（默认）、office2003、v2/ 工具栏（基础Basic、全能Full、自定义）plugins/toolbar/plugin.jsconfig.toolbar = Basic;config.toolbar = Full;config.toolbar_Full = Source,-,NewPage,Preview,-,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,-,Print, SpellChecker, Scayt,Undo,Redo,-,Find,Replace,-,SelectAll,RemoveFormat,Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField,/,Bold,Italic,Underline,Strike,-,Subscript,Superscript,NumberedList,BulletedList,-,Outdent,Indent,Blockquote,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Link,Unlink,Anchor,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,/,Styles,Format,Font,FontSize,TextColor,BGColor;/以上配置自己需要用到的按钮，按钮代码可以去网上找 呵呵;CKEDITOR.on(dialogDefinition,function (ev) var dialogName = ; var dialogDefinition = ev.data.definition; /alert(dialogName); if (dialogName = image) dialogDefinition.removeContents(advanced);/消除advanced标签 dialogDefinition.removeContents(Link);/消除Link标签 );后面这个函数是去掉点击“图像”按钮时超链接和高级选项卡，只保留图像选项卡。自定义上传图片配置1. 添加 “上传”按钮，需要修改pluginsimagedialogsimage.js文件，找到CKEDITOR.dialog.validate.notEmpty(b.lang.image.urlMissing),这一段，在这一段之后，增加“上传”按钮：type:button,id:myUpload,style:display:inline-block;margin-top:10px;,align:center,label:上传,onClick:function()var retFile=showModalDialog(upload/upload.jsp,dialogHeight:20;dialogWidth:29;);if(retFile != null)this.getDialog().setValueOf(info,txtUrl,retFile);,保存后，可看到下图效果，要是看不到，可重新打开浏览器。2. 可以看到上图的预览中的英文已经去掉，这个也需要修改pluginsimagedialogsimage.js文件，找到config.image_previewText这一段，把它后面的英文清空即可，如这个样子：(b.config.image_previewText|)，然后再看页面，编辑器就变成如上图的样子了。现在我们要做的就是实现上传的功能了。上传图片功能首先说下由于项目是ssh的框架，所以我的环境是ssh的基础上实现的。1. 创建form：public class UploadForm extends ActionForm protected FormFile imageFile;public FormFile getImageFile() return imageFile;public void setImageFile(FormFile imageFile) this.imageFile = imageFile;2. 创建页面function ajaxFileUpload() var imgPath = $(#imageFile).val();if (imgPath = null | imgPath = ) alert(请浏览图片);return false;if(!checkImg(imgPath)return false;/检查文件格式$.ajaxFileUpload( url : /system/upload.do?method=saveImage, /需要链接到服务器地址secureuri : false,fileElementId : imageFile, /文件选择框的id属性dataType : text, /服务器返回的格式，可以是jsonsuccess : function(data, status) /相当于java中try语句块的用法window.returnValue = data; /返回父页面 window.close();,error : function(data, status, e) /相当于java中catch语句块的用法$(#result).html(添加失败););function checkImg(path) var file = document.getElementById(upload);var i = path.lastIndexOf(.);var ext = path.substring(i);var ext1 = ext.toLowerCase();if (ext1 != .gif & ext1 != .ief & ext1 != .jpg& ext1 != .jpeg & ext1 != .tiff & ext1 != .tif& ext1 != .bmp & ext1 != .svg & ext1 != .svgx) alert(不支持图片的类型: + ext);return false;return true;因为我用的是公共的引用，单独用的话，还需要引用jquery.js里面包括了检查文件格式的js代码。3. 创建actionpublic class uploadAction extends DispatchAction /* * CKedit插件上传图片所使用的方法 * * throws IOException */public void saveImage(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) throws IOException UploadForm uploadForm = (UploadForm) form;FormFile file = uploadForm.getImageFile(); String root = request.getRealPath(upload); String path = request.getContextPath(); String basePath = request.getScheme() + :/ + request.getServerName() + : + request.getServerPort() + path + /; File dir = new File(root); if (dir.exists()=false) dir.mkdir(); try InputStream is = file.getInputStream(); File destFile = new File(root,file.getFileName(); OutputStream os = new FileOutputStream(destFile); byte buffer = new byte1024; int length = 0; while(length= is.read(buffer) 0) os.write(buffer, 0, length); is.close(); os.close(); if (file.getFileName() != null | !file.getFileName().equals() basePath = basePath+upload/+file.getFileName(); catch (Exception e) e.printStackTrace();finally response.getWriter().print(basePath); 注意：同名字的图片会被覆盖。还有一种方法以日期重新生成文件名字，如下：public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) UploadForm uploadForm = (UploadForm) form;/ 取得文件对象FormFile file = uploadForm.getImageFile();/ 通过时间和file的文件后缀,拼写出文件名java.util.Date date = new java.util.Date();String fileName = date.getTime()+ file.getFileName().substring(file.getFileName().lastIndexOf(.);/ 取得绝对路径System.out.println(fileName);String pathName = this.getServlet().getServletContext().getRealPath(/)+ /upload/ + fileName;/ 将拼写好的文件名保存到对象中System.out.println(pathName);try / 定义输出流FileOu