1、本人使用的CKEditor版本是4.2 在官网上下载个CKeditor http://ckeditor.com/download,如果您只是简单的使用,可以下载一个简洁版
,如果是想功能完善一点,可以下载full版!
这里我下载的是Full Package! 下载之后解压,直接添加到项目中的WebRoot下任意路径下!
2、页面引用:
①引入js:
- <script language="javascript" src="<%=request.getContextPath()%>/common/ckeditor/ckeditor.js" type="text/javascript"></script>
我这里把ckeditor放在了WebRoot下的common目录下
②通过一个textarea 替换成编辑器:
- <html:hidden property="oper" />
- <textarea rows="30" cols="50" name="content"></textarea>
这里隐藏了一个对象字段,对应到数据库保存字段!主要用 于 回显
③js 创建ckeditor对应,引入编辑器:
- <script type="text/javascript">
- var editor = null;
- window.onload=function(){
- editor = CKEDITOR.replace('content');
- editor.setData(document.getElementsByName("oper")[0].value);
- }
-
- </script>
至此就可以用了
3、上传图片
点击编辑器中图标可以看到插入图片的窗口!可能我只是个新手,但是我还是感觉这块太不好用了只是有个【图片信息】、【链接】、【高级】;想插入图片非常麻烦,这里可以把 隐藏的【上传】功能按钮显示出来,但是具体的上传功能还是要咱们手写;
①把【上传】按钮显示出来:
首先,还是image.js这个文件,搜索“upload”可以找到这一段
id:'Upload',hidden:!0
实际上上传功能被隐藏了,把上面的!0改成false,或者是0,再打开编辑器,就能找到上传功能了。
②完成上传类:
- <pre code_snippet_id="150343" snippet_file_name="blog_20140110_1_5783331" name="code" class="java">public class UploadAction extends Action{
-
-
- private FormFile upload;
-
- public FormFile getUpload() {
- return upload;
- }
-
- public void setUpload(FormFile upload) {
- this.upload = upload;
- }
-
- public ActionForward execute(ActionMapping mapping,ActionForm form,
- HttpServletRequest request,HttpServletResponse response) throws Exception{
- PrintWriter out = response.getWriter();
- DiskFileUpload upload = new DiskFileUpload();
- upload.setHeaderEncoding("UTF-8");
- List list = upload.parseRequest(request);
- response.setCharacterEncoding("UTF-8");
- String realPath = request.getSession().getServletContext().getRealPath("/");
-
- Iterator iter= list.iterator();
- while(iter.hasNext())
- {
- String callback = request.getParameter("CKEditorFuncNum");
- FileItem element = (FileItem) iter.next();
- String fileName = element.getName();
- String fileType = fileName.split("\\.")[1];
- String fileNamed = java.util.UUID.randomUUID().toString();
- fileNamed = fileNamed+"."+fileType;
- if(!fileType.equals("png")&&!fileType.equals("gif")&&!fileType.equals("jpg")&&!fileType.equals("jpeg")&&!fileType.equals("bmp")){
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
- out.println("</script>");
- return null;
- }
- File file = new File(realPath+"UserFiles/",fileNamed);
- element.write(file);
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "UserFiles/"+fileNamed+"','')");
- out.println("</script>");
- }
- return null;}
-
-
- }</pre><br>
- <br>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
我这里是用的struts1 写的一个action 这里 自己随意写个上传类servlet action 都无所谓!只要ckeditor能找到就行
③ ckeditor 调用上传类:在config.js 中添加
- var pathName = window.document.location.pathname;
-
- var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
- config.filebrowserImageUploadUrl = projectName+'/uploadAction.do';
- config.filebrowserUploadUrl=projectName+"/uploadAction.do";
这里pathName指的是项目名!
④ 在ckeditor 字体中加 中文字体 :这是默认没有中文字体; 同样可以在config.js中添加:
- config.font_names='宋体/宋体 ;黑体/黑体 ;仿宋/仿宋_GB2312 ;楷体/楷体_GB2312 ;隶书/隶书 ;幼圆/幼圆 ;微软雅黑/微软雅黑 ;'+ config.font_names;
-
这样就能显示中文字体了
4、添加行距:
①从百度上下载一个 ckeditor 行距包,解压放到ckeditor/plugins目录下。
②在config.js 中添加
config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');//行距③(转载)
1. lineheight插件源码修改:
1.原先的插件依赖于ckeditor/plugins/sytles插件,而ckeditor4.0是没有这个插件,所以如果直接使用该插件,会报错:
Uncaught [CKEDITOR.resourceManager.load] Resource name "styles" was not found
因此,要修改插件中对styles的引用:
a.在lineheight目录下的plugin.js中:
将
- CKEDITOR.plugins.add('lineheight',
- {
- lang: ['zh-cn'],
-
-
- requires : [ 'richcombo', 'styles'],
-
-
-
- init : function( editor )
-
- .......
中的requires: ['rechcombo', 'styles'] 改为: requires: ['rechcombo']
2.改完后使用,仍然会报错:
Uncaught TypeError: Cannot read property 'editor' of undefined
定位代码,在lineheight/plugin.js中:
- editor.ui.addRichCombo( comboName,
- {label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : editor.skin.editor.css.concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},
-
- init : function(){
-
- .......
-
.......
报错地方: css : editor.skin.editor.css.concat( config.contentsCss )
这是最新的ckeditor获得css配置的方式与原先不同引起的,那么对应的改为:
- css: [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),
3.上述改动完成后就可以使用行距这个功能了,但是发现下拉框没有标题,但是lineheight/lang/zh-cn.js中配置了标题呀。。。原因是新的ckeditor调用标签的方式变了:
将/lineheight/plugin.js中下部分代码:
- editor.ui.addRichCombo( comboName,{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},
-
- init : function(){this.startGroup( lang.panelTitle );
改为:
- editor.ui.addRichCombo( comboName,{label : lang.lineheight.label,title: lang.lineheight.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.lineheight.panelTitle }},
-
- init : function(){this.startGroup( lang.lineheight.panelTitle );
4.这样就完成了所有的配置了,当然如果想额外添加一些行距设置项,可以在/lineheight/plugin.js中添加,具体位置:
- CKEDITOR.config.lineheight_sizes = 'normal;1.5em;1.75em;2em;3em;4em;5em;100%;120%;130%;150%;170%;180%;190%;200%;220%;250%;300%;400%;500%';
看到这个配置,你就会发现,这只是这个行距插件的默认配置值 ,那么如果要添加一些行距元素的话,可以在ckeditor的config.js中添加:
- CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes + ’你添加的行距元素‘;