CKEditor 3.6 入门二

配置CKEditor

 

    主要有三种方式配置CKEditor，可以在 CKEditor API 中CKEDITOR.config 部分查看所有可配置选项。

 

一、在页面中配置

    在页面中进行配置是CKEditor官方推荐的方式，这样可以避免修改CKEditor原始的配置文件，使得应用进行升级时更加便捷。可以在任意的创建CKEditor实例的方法中对其进行配置，如CKEDITOR.replace 和 CKEDITOR.appendTo ：

 

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

 

二、在config.js中配置

    默认情况下，这个文件基本是空的，可以在这个文件中进行你所需配置，如：

 

CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

 

三、自定义配置文件

    若不想更改config.js文件，CKEditor 也允许用户自定义自己的配置文件。在任意位置创建一份config.js的拷贝，如在根目录下创建一个名为“custom”的文件夹，将config.js文件拷贝至此文件夹，并重命名为“ckeditor_config.js ”，这样，在创建CKEditor实例时，就可以指定此文件为CKEditor的配置文件：

 

CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

 

定义工具栏

 

    CKEditor提供了许多工具栏按钮，可以根据需要自由选择所需的部分。或使用 CKEditor 提供的两种的工具栏风格：

 

config.toolbar = 'Full';
 
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['BidiLtr', 'BidiRtl'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];
 
config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

 

若想自定义工具栏按钮，可在config.js配置如下片段：

 

CKEDITOR.editorConfig = function( config )
{
    config.toolbar = 'MyToolbar';
 
    config.toolbar_MyToolbar =
    [
        ['NewPage','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];
};

 

若应用中定义了多种工具栏风格，可在创建CKEditor实例时，为其指定一种：

 

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'MyToolbar'
    });
 
CKEDITOR.replace( 'editor2',
    {
        toolbar : 'Basic'
    });

 

你也可以在创建实例时，直接为其定义工具栏选项：

 

CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

 

样式

 

    我们可以自定义CKEditor工具栏中“样式”下拉列表的内容，CKEditor提供了许多默认的样式，默认的样式列表定义在“plugins/styles/styles/default.js”文件中。可以通过如下形式定义自己的样式列表，并将其注册到 CKEditor中：

 

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
    // Object styles
    { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } },
 ]);

 

其中，“my_styles”是自定义样式的名称，必须是唯一的。定义好之后，就可以通知CKEditor实例使用这个样式了：

 

config.stylesSet = 'my_styles';

 

    自定义的样式可以配置在config.js中、CKEditor实例的jsp页面，或者一个单独的文件，甚至一个已知的URL中，可以通过如下形式指定它的位置：

 

config.stylesSet = 'my_styles:/styles.js';
 
OR
 
config.stylesSet = 'my_styles:http://www.example.com/styles.js';

 

    一条自定义的样式包括：name、element、 attributes，和CSS样式的定义，如：

 

{
    name : '在样式下拉列表中显示的名称',
    element : 'HTML元素的名称 (如 "span")',
    styles :
    {
        'css-style1' : 'desired value',
        'css-style2' : 'desired value',
        ...
    }
    attributes :
    {
        'attribute-name1' : 'desired value',
        'attribute-name2' : 'desired value',
        ...
    }
}

 

其中，name 和 element元素是必选的，其它是可选的。

 

    CKEditor有三种级别的元素样式，分别是：

 

Block-level styles（块级元素样式） – 应用于文本块（段落）。适用于以下元素 These apply to the following elements: address , div , h1 , h2 , h3 , h4 , h5 , h6 , p , and pre .

 

Object styles（对象元素样式） – 应用于特殊的可被选择的对象（不是文本），当一个对象被选中之后才被显示。适用于以下对象： a , embed , hr , img , li , object , ol , table , td , tr and ul .

 

Inline styles（内联元素样式） – 用于扩展被选中的文本样式。

 

 

 

评论

1 楼 xieyanxy9 2014-03-27  

nice,刚好用到