CKEDITOR开发者站点定制版,定制你的HTML文本编辑器

Posted on 2017-02-27 by 毛三胖

摘要

简要介绍了CKEditor4.6.2开发者网站编辑器的基本定制过程,并提供了定制版演示和ZIP下载包。主要是在基本下载包的基础上增加了块引用,代码,图片,表格,公式编辑器,格式等六个插件。


1.CKEditor4.6版发布

2016年11月CKEditor4.6版官方发布了,其中新的缺省的皮肤样式Moono-Lisa较以前确实有较大的提升,让人眼前一亮。在其官网 http://www.ckeditor.com 上定制的几款编辑器也很实用和简洁。

CKEditor

其中Article Editor,Document Editor和Developer Site Editor(Feathers频道)都很吸引我。CKEditor官网上并没有提供上述版本的下载,需要手工定制,我定制了一款开发者站点编辑器并把过程和大家分享。

2.CKEditor4.6.2开发者站点定制版定制过程

CKEDITOR开发者站点定制版

  1. 在CKEditor下载频道(download)点击在线定制(Customize | Online Builder)
  2. 在定制页面,第一步,选择基本版(Basic)
  3. 第二步,在可选插件(Available plugins)选择框中查找Blockquote(块引用),并将其加入到左侧已选插件(Selected plugins)选择框中。按上面方法,依次加入Code Snippet,Image,Table,Mathematical Formulas,Format共六个插件后,选择喜欢的皮肤。
  4. 第三步,增加简体中文(Chinese Simplified)到编辑器语言中。
  5. 第四步,选择同意确认选择框,点击下载完成定制过程。

3.CKEditor4.6.2开发者站点定制版配置

将下载的ZIP包解压并部署到服务器上,修改config.js文件,在config.removeButtons 增加About项,并增加配置项config.format_tags = 'p;h1;h2;h3;pre',即只保留格式选择中的普通,标题1,标题2,标题3和已编排格式五项。

config.js文件内容如下:

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for a single toolbar row.
    config.toolbarGroups = [
        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'forms' },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'tools' },
        { name: 'others' },
        { name: 'about' }
    ];

    // The default plugins included in the basic setup define some buttons that
    // are not needed in a basic editor. They are removed here.
    config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,About';

    // Dialog windows are also simplified.
    config.removeDialogTabs = 'link:advanced';
    config.format_tags = 'p;h1;h2;h3;pre';
};

4.测试及定制版下载

测试代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor 4.6.2 for developer by 42度(42du.cn)</title>
    <script type="text/javascript" src="ckeditor.js"></script>
</head>
<body>
<form>
    <textarea name="editor1" id="editor1" rows="10" cols="80">
        www.42du.cn
    </textarea>
    <script type="text/javascript" >
        CKEDITOR.replace( 'editor1' );
    </script>
</form>
</body>
</html>

演示地址:index.html

下载地址:ck_4dev.zip