ckeditor实战总结

介绍

使用范围较广的富文本编辑器。官方文档

config.js的常用配置

参考：https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = 'Full';
    config.toolbarLocation = 'top';
    config.height = 700;
    config.toolbar = [
        // { name: 'document', items: [ 'Source'] },
        // { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ] },
       // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace' ] },
        //{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton' ] },
        // '/',
        { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic', 'Underline', 'Strike'] },
        { name: 'paragraph', groups: [ 'list', 'blocks' ], items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote' ] },
        { name: 'links', items: [ 'Link' ] },
        { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
        { name: 'styles', items: [ 'Styles', 'Format', 'FontSize','CodeSnippet' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ];

    config.plugins = 'dialogui,dialog,basicstyles,blockquote,button,toolbar,clipboard,menu,filetools,filebrowser,floatingspace,listblock,font,format,horizontalrule,wysiwygarea,image,menubutton,link,list,liststyle,maximize,pastetext,tab,table,tabletools,tableselection,lineutils,uploadwidget,uploadimage,textwatcher,htmlwriter,undo';
    config.skin = 'moono-lisa';
    config.resize_enabled = false;                    //禁止拖拽改变尺寸
    config.removePlugins = 'elementspath';            //删除底边栏
    config.image_previewText=' ';                //清空图片上传预览的内容
    config.image_prefillDimensions = false;            //禁止图片上传完毕后自动填充图片长和宽
    config.imageUploadUrl = '/post/upload';        //图片上传接口
    config.filebrowserImageUploadUrl= '/post/upload';
    config.extraPlugins = 'wordcount,codesnippet';        //其他插件：字数统计、提示信息、语法高亮
    config.wordcount = {
        showParagraphs: false,                    // 是否统计段落数
        showWordCount: false,                    // 是否统计词数
        showCharCount: true,                    // 是否统计字符数
        countSpacesAsChars: false,                // 是否统计空间字符
        countHTML: false,                    // 是否统计包括HTML字符的字符数
        maxWordCount: -1,                    // 最大允许词数，-1表示无上限
        maxCharCount: -1,                    //最大允许字符数，-1表示无上限
        filter: new CKEDITOR.htmlParser.filter({        //添加筛选器添加或删除元素之前计数（CKEDITOR.htmlParser.filter），默认值：null (no filter)
            elements: {
                div: function( element ) {
                    if(element.attributes.class == 'mediaembed') {
                        return false;
                    }
                }
            }
        })
    };
    config.codeSnippet_theme =  'github';

    //添加中文字体
    //config.font_names="宋体/SimSun;新宋体/NSimSun;仿宋_GB2312/FangSong_GB2312;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;微软雅黑/Microsoft YaHei;幼圆/YouYuan;华文彩云/STCaiyun;华文行楷/STXingkai;方正舒体/FZShuTi;方正姚体/FZYaoti;"+ config.font_names;
};

配置图片上传接口

参考：https://blog.csdn.net/sayoko06/article/details/81450441

@ResponseBody
    @PostMapping("/upload")
    public String upload(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response){
        FileResponse fileResponse = new FileResponse();
        String fileName = file.getOriginalFilename();
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        String newFileName = IDUtils.getUUID()+suffixName;
        Calendar cal = Calendar.getInstance();
        int month = cal.get(Calendar.MONTH) + 1;
        int year = cal.get(Calendar.YEAR);
        String uploadPath = baseUploadPath+ File.separator+String.valueOf(year)+File.separator+String.valueOf(month);
        File uploadPathFile = new File(uploadPath);
        if(!uploadPathFile.exists()){
            uploadPathFile.mkdirs();
        }

        //System.out.println("上传路径："+uploadPath);

        try {
            String realPath = uploadPath+File.separator+newFileName;
            file.transferTo(new File(baseUploadPath+newFileName));
//            return {"uploaded":1, "fileName" : "image.png", "url":"http://localhost:15593/UploadImages/RickEditorFiles/Content/2017-05-23 10_39_54.png"  };
            return fileResponse.success(1, newFileName, ckeditorAccessImageUrl + newFileName, null);
//            return "{\"uploaded\" : 1, \"fileName\" : \"image.png\", \"url\": , \"error\" : { \"message\":\"\" } }";
        } catch (IOException e) {
            e.printStackTrace();
            return fileResponse.error(0,"系统异常！");
        }


    }

初始化ckeditor

var editor;
$(function () {
   editor = CKEDITOR.replace('m_content');
  });

获取HTML文本

postContent = CKEDITOR.instances.editor.getData().trim();

获取纯文本

postTextContent = CKEDITOR.instances.editor.document.getBody().getText();