富文本 ckeditor 使用心得整理。

ckeditor 是一个个人认为非常好用的富文本插件，虽然让我开发中哀声怨道。
官网：https://ckeditor.com/

首先说一下我知道的几个文件夹作用。

首先是语言文件夹 lang 当然我们只需要 zh-cn.js 一个就好了
其次小组件文件夹。 ckeditor的小组件 是有很多很强大的 如果需要的可以在https://ckeditor.com/cke4/addons/plugins/all 地址上查找后下载自己需要的插件进行使用。
使用方法 下载插件后解压找到最内一层的文件夹复制粘贴到plugins文件夹里。然后在配置文件中config.js

config.extraPlugins = 'easyimage';

如果多个插件添加 两个之间用英文逗号隔开就好了。

之后说道了 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) {
    //在此定义对默认配置的更改。
    //完整参考请参见：
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    //工具栏组排列，针对两个工具栏行进行了优化。
    /**
     * 字体组件下载
     * https://ckeditor.com/cke4/addon/font
     * @type {string}
     */
    // 展示字体
    config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'
    //默认字体
    config.font_defaultLabel = '宋体';
    // 字号展示
    config.fontSize_sizes = '一号/34px;小一/32px;二号/29px;小二/24px;三号/21px;小三/20px;四号/18px;小四/16px;五号/14px;小五/12px;六号/10px;小六/8px';    //设置字体大小时 使用的式样
    // 默认字号
    config.fontSize_defaultLabel = '小四';

    /**
     * 行间距下载
     * https://ckeditor.com/cke4/addon/lineheight
     * @type {string}
     */
    // 行距展示
    config.line_height="一倍/1;二倍/2;三倍/3;四倍/4;"

    // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    config.toolbar = 'Full';

    config.toolbar_Full = [
        {name: 'document', items: ['Source', '-', 'DocProps', 'Preview', 'Print', '-']},
        {name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
        {name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-']},
        {
            name: 'basicstyles',
            items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
        },
        '/',
        {
            name: 'paragraph',
            items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
        },
        {name: 'links', items: ['Link', 'Unlink', 'Anchor']},
        {name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak']},
        '/',
        {name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize']},
        {name: 'colors', items: ['TextColor', 'BGColor']},
        {name: 'tools', items: ['ShowBlocks', '-']}
    ];
    // 默认 工具栏
    config.toolbar_Basic = [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']];

    //工具栏组
    config.toolbarGroups = [
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
        {name: 'links'},
        {name: 'insert'},
        {name: 'forms'},
        {name: 'tools'},
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'others'},
        '/',
        {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
        {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
        {name: 'styles'},
        {name: 'colors'},
        {name: 'about'}
    ];

    // 删除标准插件提供的一些按钮，这些按钮是
    // 标准工具栏中不需要。
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // 简化对话框窗口。
    config.removeDialogTabs = 'image:advanced;link:advanced';

    /*将编辑器的语言设置为中文*/
    config.language = 'zh-cn';
    /*去掉图片预览框的文字*/
    config.image_previewText = ' ';
    /*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
    config.filebrowserImageUploadUrl = "/editor/upload";

    config.enterMode = CKEDITOR.ENTER_P;

    config.shiftEnterMode = CKEDITOR.ENTER_BR;




    //组件配置
    config.extraPlugins = 'font,lineheight,autocorrect,justify,quickformat';
    // config.extraPlugins='autoformat';


};

配置上说完了 我们直接说说怎么使用

在页面

  <!-- 引入js-->
   <script type="text/javascript" src="/ckeditor/samples/js/sample.js"></script>
   <script type="text/javascript" src="//ckeditor/ckeditor.js"></script>
   
        <textarea name="content" style="width: 1000px;"     id="editor"></textarea>
        <!-- js 初始化 -->
        <script type="text/javascript">
    editor = CKEDITOR.replace('editor', {
        filebrowserImageUploadUrl: basePath + "/editor/upload?", // 上传路径
        removePlugins: 'elementspath,resize', 
        codeSnippet_theme: 'zenburn',
        height: '600', //高度
        width:'800',  //宽度
        toolbar: [{      //工具
            name: 'document',
            items: ['Print']
        },
            {
                name: 'clipboard',
                items: ['Undo', 'Redo']
            },
            {
                name: 'styles',
                items: ['Format', 'Font', 'FontSize','lineheight']
            },
            {
                name: 'colors',
                items: ['TextColor', 'BGColor']
            },
            {
                name: 'align',
                items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
            },
            '/',
            {
                name: 'basicstyles',
                items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
            },
            {
                name: 'links',
                items: ['Link', 'Unlink']
            },
            {
                name: 'paragraph',
                items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
            },
            {
                name: 'insert',
                items: ['Image', 'Table']
            },
            {
                name: 'tools',
                items: ['Maximize']
            },
            {
                name: 'editing',
                items: ['Scayt']
            },
            {
                name: 'ces',
                items: ['quickformat']
            }
        ],
    });
    editor.config.readOnly = readOnly;
</script>