ckedit4.1使用记录

config.js:

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function (config) {
    config.language = 'zh-cn';
    config.uiColor = '#d1e9f3';
    config.toolbarCanCollapse = true;
    config.toolbarGroups = [
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
        {name: 'forms', groups: ['forms']},
        {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
        {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']},
        {name: 'links', groups: ['links']},
        {name: 'insert', groups: ['insert']},
        {name: 'styles', groups: ['styles']},
        {name: 'colors', groups: ['colors']},
        {name: 'tools', groups: ['tools']},
        {name: 'others', groups: ['others']},
        {name: 'about', groups: ['about']}
    ];
// 图片上传配置
    config.image_previewText = ' ';/*去掉图片预览框的文字*/
    /*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
    // config.filebrowserUploadUrl = '/sysfile/ckupload?type=File';
    config.filebrowserImageUploadUrl = '/sysfile/ckupload?type=Image';
    // config.filebrowserFlashUploadUrl = '/sysfile/ckupload?type=Flash';
    // 图片浏览配置
    //config.filebrowserImageBrowseUrl = 'browerServer.do?type=image';

    config.removeButtons = 'Source,Save,NewPage,Print,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Iframe,PageBreak,Flash,About,Language';
};

文件上传类:

   @RequestMapping(value = "/sysfile/ckupload", method = RequestMethod.POST)
    public void upload(@RequestParam(value = "upload", required = false) MultipartFile files) {
        PrintWriter out = null;
        String originalFilename = files.getOriginalFilename();
        String fileType = originalFilename.substring(originalFilename.lastIndexOf(".",originalFilename.length()));
        String imageUrl = "ckupload";
        String msg = "";
        String fileName = "";
        String strFilePath = "";
        boolean isComplete = false;
        JSONObject result = new JSONObject();
        try {
            String filePrefixFormat = "yyyyMMddHHmmssS";
//            String date = "";
            String date = sysUserInfo.getUserId();
//            String date = DateUtil.format(new Date(), filePrefixFormat);
//            File path = new File(ResourceUtils.getURL("classpath:").getPath());
//            if(!path.exists()) path = new File("");
//            File upload = new File(path.getAbsolutePath(),imageUrl);

//            File upload = new File(serverPath+imageUrl);
//            if(!upload.exists()) upload.mkdirs();

            strFilePath = ckfilepath+imageUrl+File.separator+date+File.separator;
            File filePath = new File(strFilePath);
            if(!filePath.exists()) filePath.mkdirs();

            fileName = UUID.randomUUID().toString()+fileType;
            String savedName = strFilePath + File.separator + fileName;

//            files.transferTo(new File(savedName));
            isComplete = FileUtil.copyInputStreamToFile(files.getInputStream(), new File(savedName));
            if (isComplete==true){
                out = response.getWriter();
                imageUrl = imageUrl+File.separator+date+File.separator+fileName;
                imageUrl = imageUrl.replace("\\","/");
                imageUrl = imageUrl.replace("\\\\","/");
            }
        } catch (Exception e) {
            e.printStackTrace();
            logger.error("富文本编辑器上传图片时发生异常", e);
            msg = "服务器异常";
        } finally {
            if (!StrUtil.isBlank(msg)) {
                //上传失败
                result.put("uploaded", 0);
                JSONObject errorObj = new JSONObject();
                errorObj.put("message", msg);
                result.put("error", errorObj);
            } else {
                System.out.println(isComplete);
                //上传成功
                result.put("uploaded", 1);
//                result.put("fileName", "a.jpg");
                result.put("fileName", fileName);
//                result.put("url", "/upload/a.jpg");
                result.put("url", File.separator+imageUrl);
            }
            out.println(result.toJSONString());
        }
    }

页面添加点击事件

// var editor = CKEDITOR.replace("content", {"toolbar": "Basic"}); //显示编辑器
// editor.on('change', function (event) {

上传word文档:

1.image.js

 

var fun = eval("ckimagesuccessfun");
if (fun) {
    fun.call(this);
}

 

页面添加:

function ckimagesuccessfun() {
    console.log("xxxxxxxxxxxxx");
    var editor = CKEDITOR.instances.content; //显示编辑器
    var str = editor.getData(); //获取editor中的内容
    $("#container").append(str);
    $("#container img").each(function (i, val) {
        var srcVal = $(this).attr("src");
        if (srcVal.indexOf("docx") >= 0) {
            var altVal = $(this).attr("alt");
            var hmtlA = "<a href='" + srcVal + "'>" + altVal + "</a>";
            $(this).after(hmtlA);
            $(this).remove();
        }
    });
    editor.setData($("#container").html());
    $("#container").html("");
}

只做了docx,具体可以根据实际情况进行修改.

标签：name,记录,File,imageUrl,ckedit4.1,groups,使用,config,String
来源： https://blog.csdn.net/mlc19860417/article/details/89213867