CKEditor4.14使用记录

一. 下载和介绍

官网：https://ckeditor.com/

文档：https://ckeditor.com/docs/ckeditor4/latest/index.html

官网有ckeditor4和5，4和5差异很大，此篇对5没有参考价值。5属于更加轻量级的

官网有demo和文档可以查看，下载有以下版本：

​

标准版、完整版和定制版我都下载过，区别在于plugins文件夹内容、build-config.js、ckeditor.js

下载的文件目录如下：

​

完整版包括所有plugins，其他版本的需要扩展可前往"add-ons"自行下载添加。

ckeditor.js不同版本的内容是不同的。最深刻的印象（坑），就是完整版里即使你设置了保存复制word文档的格式，原有居右居中的文字还是给你居左。（如有朋友用完整版没有出现这问题，请告诉如何设置，谢谢）

build-config.js：是ckeditor基础配置文件，里面指定版本，扩展plugins，skin和支持语言等。

config.js：是全局设置，可以配置操作按钮，扩展和移除plugin，配置默认语言，字体等。不想使用全局配置，可以在页面初始化时配置。

二. 部署

加载公用js

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/config.js"></script>

页面元素（使用textarea也可以）

<div id="editor"></div>

<script>
      CKEDITOR.replace( 'editor', {
           width: 1200,
           height: 500,
           //此处设置局部配置
      } );

</script>

三.配置

配置可以参考官方文档

以下是我用到的

全局配置：config.extraPlugins='font, justify'; //扩展plugin，增加字体和文字对齐插件

局部配置：extraPlugins :'font, justify', //局部配置都是这种方式，以下不再重复

config.removePlugins = 'easyimage, cloudservices';//移除plugin

配置默认语言：config.language = 'zh-cn';//其他语言参考build-config.js里语言名称

中文字体扩展：

config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312;'+  
	    '楷体_GB2312/KaiTi_GB2312;黑体/SimHei;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;'+  
	    '华文仿宋/STFangsong;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'+  
	    '方正舒体/FZShuTi;方正姚体/FZYaoti;细明体/MingLiU;新细明体/PMingLiU;微软雅黑/Microsoft YaHei;微软正黑/Microsoft JhengHei;'

粘贴有格式文本：config.allowedContent = true;//粘贴office文档保留格式

配置操作按钮：

​

该配置最简单方式是用自带的toolbarconfigurator配置

浏览器打开解压后  ckeditor/samples/toolbarconfigurator/index.html,

​

对勾显示，不勾隐藏，配置完点击右上角get toolbar config, 复制到config.js就行。

图片文件相关配置：

//ctrl+v粘贴文件上传server路径
	config.pasteUploadFileApi = 'api';
	config.uploadUrl = '/default/system/fileupload?type=07';
	//config.uploadUrl = 'https://ckeditor.com/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images';
	
	//image插件增加图像上传栏，配置图片上传server路径
	config.filebrowserImageUploadUrl = '/default/system/fileupload?type=07';
	config.filebrowserUploadUrl = '/default/system/fileupload?type=07';
	config.removeDialogTabs = 'image:advanced;link:advanced';	//隐藏图像弹窗的链接和高级栏
	
	//easyImage必须
	//config.cloudServices_uploadUrl = "/default/system/fileupload?type=07";
	//config.cloudServices_tokenUrl ="";	//获取token，不写会报错但是不影响使用

一般image是先会弹出窗口在选择图片上传的，easyimage是直接选择图片上传。目前使用情况看，image2，即Enhanced Image Plugin才有在编辑器内拖拽控制图片尺寸的。

四.服务端部分

ckfinder：

图片上传代码官网其实提供了一种方式，使用ckfinder微服务，支持Java、PHP、.NET。可以自行查看官网文档

https://ckeditor.com/docs/ckfinder/demo/ckfinder3/samples/

自己实现

选择本地图片后，通过浏览器查看代码，这部分其实就是enctype为multipart/form-data的form表单提交

​

后台文件解析的话，可以选择apache的fileupload组件，smartupload，springweb的CommonsMultipartResolver等。

这里使用了fileupload。返回参数是json类型。

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang.StringUtils;

import com.eos.runtime.core.ApplicationContext;

@MultipartConfig
@WebServlet(name="Ck4FileUpload",urlPatterns={"/system/Ck4FileUpload"})
public class Ck4FileUpload extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = -823446104210050861L;
    
    
    private static final String tempFileDir = "/ckeditor_files/";
    // 图片类型
    private static List<String> fileTypes = new ArrayList<String>();

    static {
        fileTypes.add(".jpg");
        fileTypes.add(".jpeg");
        fileTypes.add(".bmp");
        fileTypes.add(".gif");
        fileTypes.add(".png");
    }
    
    
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        
        try {
            Ck4FileUpload.upload(req, resp);
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    
    public static void upload(HttpServletRequest request, HttpServletResponse response) 
            throws IllegalStateException, IOException {


        String absouluteDir = ApplicationContext.getInstance().getWarRealPath()+tempFileDir;
        File tmpFile = new File(absouluteDir);
        if (!tmpFile.exists()) {
            tmpFile.mkdir();
        }
        DiskFileItemFactory factory = new DiskFileItemFactory();//设置工厂
        factory.setSizeThreshold(1024*100);                        //设置缓冲区大小
        factory.setRepository(tmpFile);                            //设置临时文件夹
        
        ServletFileUpload upload = new ServletFileUpload(factory);//设置解析器
        upload.setHeaderEncoding("UTF-8");
        try {
            List<FileItem> list = upload.parseRequest(request);//解析request返回文件List
            
            for(FileItem item:list){
                if(StringUtils.isBlank(item.getName())) 
                    continue;
                
                String fileName = item.getName();
                
                // 获得图片后缀名称,如果后缀不为图片格式，则不上传
                String suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
                if (!fileTypes.contains(suffix)) {
                    response.setContentType("text/json;charset=UTF-8");
                    response.setCharacterEncoding("UTF-8");
                    PrintWriter out = response.getWriter();
                    String result = "{\"fileName\":\""+fileName+"\",\"uploaded\": 1,"
                            + "\"error\": { \"number\":\"001\", \"message\":\"文件类型不匹配，请上传jpg/jpeg/bmp/gif/png图片\" } }";
                    out.println(result);
                    out.flush();
                    out.close();
                    return;
                }
                
                String newFileName = UUID.randomUUID().toString()+fileName.substring(fileName.lastIndexOf("."));
                String imagePath = absouluteDir+newFileName;
                File imageFile = new File(imagePath);
                if(imageFile.exists()){
                    FileUtils.forceDelete(imageFile);
                }
                imageFile.createNewFile();
                FileUtils.writeByteArrayToFile(imageFile, item.get());
                item.delete();
                
                //返回图片项目路径
                String imageContextPath = request.getContextPath() + tempFileDir +  newFileName;
                response.setContentType("text/json;charset=UTF-8");
                response.setCharacterEncoding("UTF-8");
                PrintWriter out = response.getWriter();
                out.println("{\"fileName\":\""+fileName+"\",\"uploaded\": 1,\"url\": \""+imageContextPath+"\"}");
                out.flush();
                out.close();
                
            }
        } catch (FileUploadException e) {
            // TODO 自动生成的 catch 块
            e.printStackTrace();
            
            response.setContentType("text/json;charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out = response.getWriter();
            out.println("{\"fileName\":'',\"uploaded\": 1,"
                    + "\"error\": { \"number\":\"002\", \"message\":\"上传图片出现异常，请重试\" } }");
            out.flush();
            out.close();
        }
    
    
    }
    
}

 

其他：

获取值：CKEDITOR.instances.editorid.getData();  //editorid是编辑器元素id

赋值：CKEDITOR.instances.editorid.setData();

只读：config.readOnly = true; //全局配置，建议用局部配置readOnly:true,

参考文档：

官网文档

https://www.cnblogs.com/austinspark-jessylu/p/7940914.html

https://blog.csdn.net/itmyhome1990/article/details/17264627

 

posted @ 2020-05-15 10:25  Franz-Kafka  阅读(987)  评论(0)    收藏  举报