ckeditor使用技巧總結

介紹

我自己開發的博客系統，寫博客個人喜好富文本編輯器。我有幾個理由推薦ckeditor：

1. 複製、粘貼方便，還把格式都帶過來，例如:word,excel
2. 可以直接複製截圖，或上傳圖片；可編輯圖片屬性
3. 插件豐富，滿足你的DIY愛好，還可以自己寫插件
4. 用戶羣體及其廣泛遍佈全球，社區活躍，資料豐富，易學易用

 

技巧總結

 

挑選需要的插件，打包下載

參考：https://blog.csdn.net/u010071211/article/details/81565274

config.js的常用配置

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

如何配置圖片上傳接口？

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


    }

如何讓代碼高亮顯示？

 參考：https://blog.csdn.net/u010071211/article/details/81565274

如何顯示代碼行號？

hljs.initLineNumbersOnLoad();

如何添加複製代碼功能？

待補充。