下载 && 引入

下载地址：

可以看到有四种下载方式，分别是基本版、标准版、完整版以及定制

这里我下载的是完整版，之后还会说明怎么定制。

然后解压后放到你的网站目录中，引用代码如下：

    
            Hello CKEditor

运行效果：

定制ToolBar

现在打开解压后的CKEditor中的samples文件夹中的index

点击 TOOLBARCONFIGURATOR 按钮

选中Advanced

此时就可以看到 ToolBar 中每一个组件对应的名称，你可以像默认的那样给组件分组，也可以直接写

然后把你想要的组件的名字写入：ckeditor/config.js

如下是我的配置：

/** * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */CKEDITOR.editorConfig = function( config ) {	// Define changes to default configuration here. For example:	// config.language = 'fr';	// config.uiColor = '#AADC6E';    config.extraPlugins = 'widgetselection';    config.extraPlugins = 'lineutils';    config.extraPlugins = 'widget';    config.extraPlugins = 'codesnippet';    config.codeSnippet_theme = 'railscasts';        config.toolbar = [        [            'Link', 'Unlink',            '-' ,            'TextColor', 'BGColor',            '-',            'Image', 'Flash', 'Table',            '-',            'Bold', 'Italic', 'Strike',            '-',            'NumberedList', 'BulletedList',            '-',            'JustifyLeft', 'JustifyCenter',            '-',            'Blockquote','CodeSnippet',            '-',            'Format',            '-',            'Preview','Source','Maximize'            ]    ];};

运行效果如下：

其实我就是按照开源中国的排列方式做的

添加插件

这里以一个插件代码的插件codesnippet 为例

你可以在如下网址搜索插件：

找到后下载

也可以点击 Add to my editor

这样你可以需要什么插件就添加什么插件，完事之后点击右边的 Build My Editor 下载你的定制版，这个方法还有个好处就是可以自动包含依赖包，不用你手动的下载了，推荐这种方法

下载后用使用方法的提示

注意第3条提示

你只是下载这个插件还不行，直接引用 的话会有错误，因为你还要下载他的依赖包

下载好依赖包后，根据提示配置好，如下：

/** * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */CKEDITOR.editorConfig = function( config ) {	// Define changes to default configuration here. For example:	// config.language = 'fr';	// config.uiColor = '#AADC6E';    config.extraPlugins = 'widgetselection';    config.extraPlugins = 'lineutils';    config.extraPlugins = 'widget';    config.extraPlugins = 'codesnippet';    config.codeSnippet_theme = 'railscasts';    config.toolbar = [        [            'Link', 'Unlink',            '-' ,            'TextColor', 'BGColor',            '-',            'Image', 'Flash', 'Table',            '-',            'Bold', 'Italic', 'Strike',            '-',            'NumberedList', 'BulletedList',            '-',            'JustifyLeft', 'JustifyCenter',            '-',            'Blockquote','CodeSnippet',            '-',            'Format',            '-',            'Preview','Source','Maximize'        ]    ];};

每个插件都有相应的文档，比如这个插件的配色方案在：

根据文档可知修改配色方案的方法在：

图片上传和回显

首先是显示上传的tab

// 上传路径   config.filebrowserUploadUrl = '/uploadck';   // 图片服务器路径   //config.filebrowserBrowseUrl='/browser/browse.php',   // 预览图片时的文字   config.image_previewText=' ';

运行之后的效果：

前台页面代码

    
        
    
    
     
文件：
    
     
    
    Hello CKEditor

后台代码

package com.laolang.gongda.bookstore.web;import com.laolang.gongda.bookstore.service.PicUploadService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;@Controllerpublic class UploadController {    @Autowired    private PicUploadService picUploadService;    @RequestMapping(value = "/upload")    public String uploadForm(){        return "upload";    }    @RequestMapping(value = "/upload",method = RequestMethod.POST)    public String upload( @RequestParam("file")MultipartFile multipartFile , Model model){        String result = picUploadService.uploadPic(multipartFile);        if( null == result ){            result = "上传失败";        }        System.out.println(result);        model.addAttribute("msg",result);        return "result";    }    // ckeditor 上传和回显    @RequestMapping(value = "/uploadck", method = RequestMethod.POST)    public void uploadCk(@RequestParam(name = "upload") MultipartFile multipartFile, HttpServletRequest request, HttpServletResponse response) throws IOException {        System.out.println("hello");        System.out.println("world");        // 上传        String fileName = picUploadService.uploadPic(multipartFile);        // 回显        response.setContentType("text/html;charset=UTF-8");        String callback = request.getParameter("CKEditorFuncNum");        PrintWriter out = response.getWriter();        out.println("");        out.flush();        out.close();    }}

关键是回显的那一部分 我返回的 fileName 是图片在服务器上的绝对路径，然后这个控制器向浏览器返回了一段JS脚本，这样就可以上传图片之后立即预览。效果图就不发了。

参考

未完项

1. 详细设置，比如禁止修改高度
2. 自定义插件
3. 其它问题