ckeditor使用技巧总结

介绍

官方开发者文档：CKEditor 4 documentation

技巧总结

1.挑选需要的插件，打包下载

参考：CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件_djl的专栏，blog.djl.cx好记-CSDN博客

2.config.js的常用配置

全部配置：Class Config (CKEDITOR.config) - CKEditor 4 API docs

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

3.配置图片上传接口

参考：ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传_sayoko06的博客-CSDN博客_ckeditor上传图片

@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,"系统异常！");
        }

    }

4.初始化CKEDITOR

<textarea id="editor" name="editor" rows="80"
                    style="width: 99.4%; display: none; visibility: hidden;"></textarea>

<script>
// 初始化编辑器
CKEDITOR.replace('editor');
</script>

5.获取编辑器中HTML文本

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

6.获取编辑器中纯文本

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

7.代码高亮显示

参考：CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件_djl的专栏，blog.djl.cx好记-CSDN博客

8.显示代码行号？

hljs.initLineNumbersOnLoad();