ckeditor的使用(行距，上传图片，字体)

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.οnlοad=function(){
                editor = CKEDITOR.replace('content');//替换textarea
                editor.setData(document.getElementsByName("oper")[0].value);//用于回显数据库数据
            }

         </script>

至此就可以用了

3、上传图片

点击编辑器中图标可以看到插入图片的窗口！可能我只是个新手，但是我还是感觉这块太不好用了只是有个【图片信息】、【链接】、【高级】；想插入图片非常麻烦，这里可以把 隐藏的【上传】功能按钮显示出来，但是具体的上传功能还是要咱们手写；

①把【上传】按钮显示出来：

首先，还是image.js这个文件，搜索“upload”可以找到这一段

id:'Upload',hidden:！0

实际上上传功能被隐藏了，把上面的！0改成false，或者是0，再打开编辑器，就能找到上传功能了。

②完成上传类：

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;}
	

}

我这里是用的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 +   ’你添加的行距元素‘;