CKEDITOR使用與配置

安裝：

　　下載CKEDITOR的文件，解壓後複製到工程的WEBROOT目錄下就OK！

引用CKEDITOR的JS文件：

　　新建JSP頁面，添加其JS文件<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

　　注意：1.src的路徑。

　　　　　2.不要寫成<script type="text/javascript" src="ckeditor/ckeditor.js />樣式，在現有的3.0.1版本中會出現CKEDITOR未定義的腳本錯誤提示，導致不能生成編輯器。

替換TEXTAREA標籤：

 

<textarea rows="30" cols="50" name="editor01">請輸入 .</textarea>
<script type="text/javascript">CKEDITOR.replace('editor01');</script>

　

注意：要在textarea後面加入javascript.若是要在HEAD區寫javasript,那麼採用以下代碼：

 

<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace( 'editor01' );
    };
</script>

 

好了到此一個默認的CKEDITOR就配置完畢了，能夠去頁面看看它的模樣了。

固然還有一個方法CKEDITOR.appendTo(elementOrId, config) 它能夠在特定的dom對象中建立CKEDITOR

 

<div id="editorSpace"><:/div>

CKEDITOR.appendTo( 'editorSpace' );

 

屬性配置：

全部的配置，均可以查閱官方的API：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

IN-PAGE配置方式：

The best way to set your configurations is in-page, when creating editor instances. In this way you avoid touching the original distribution files in the CKEditor installation folder, making the upgrade task easier.

最好在建立編輯器的頁面中配置你的編輯器屬性，使用這種方式，你無需理會在CKEDITOR安裝目錄中的配置文件（ps:in-page的優先級最高）.

 

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

注意：合法的屬性是以「{」開始,「}」"結束，屬性名和屬性值用「：」隔離.

 

默認屬性文件配置方式：

You can also place your settings inside the config.js file also. You will note that the file is mostly empty by default. You simply need to add the configurations that you want to change. For example:

你也能夠在config.js 中加入配置信息，當你打開該文件時你會發覺它幾乎爲空（默認）。你要作的是把配置信息加入其中。

 

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

自定義屬性文件配置方式：

Suppose you have copied config,js inside a folder named "custom" in the root of your web site. You have also renamed the file to "ckeditor_config.js". At that point, you must only set the customConfig setting when creating the editor instances. For example:  

 

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

假設你在custom目錄中有一自定義的配置文件ckeditor_config.js，那麼就必須在建立ckeditor實例時制定它的路徑（用customConfig屬性）。

 

Configurations Overload Order 配置的優先級

You're not required to use only one of the above configuration options. You can mix all of them, and the configurations will be overloaded properly. The following is configurations loading order when creating an editor instance:

你沒必要僅使用上面的一種方式進行配置，而是能夠混合使用它們，這些配置會以特定的優先級順序進行復寫。

1. The editor instance is created. At this point all its default configurations are set. 
   編輯器建立的那一瞬間，會加載默認的配置信息。
2. If the customConfig setting has been set "in-page", that file is loaded, otherwise the default config.js file is loaded. All settings in this file override the current instance settings. 
   這時，若是系統發現咱們制定了一個自定義的配置文件，那麼就會加載它，不然就會加載默認的配置文件。加載的該文件的屬性將會複寫當前實例的屬性。
3. If the settings loaded in point "2" also define a new customConfig value, this new file is loaded and its settings overload the current instance settings. This happens recursively for all files until no customConfig is defined. 
   若是在自定義的文件中有加入新的其它自定義文件，那麼新的文件會複寫當前實例的屬性。這樣一直循環遞歸，知道沒有新爲自定義文件爲止。
4. Finally the settings defined "in-page" override the current instance settings (except customConfig, which has been used at point "1"). 
   最後行內的屬性（除了customConfig）將複習當前實例的屬性。

 

Avoiding Loading External Settings Files

It is also possible to completely avoid loading an external configuration file, reducing the number of files loaded. To do that, it's enough to set the customConfig setting to an empty string. For example:

CKEDITOR.replace( 'editor1',
    {
        customConfig : ''
    });

This setting is definitely recommended if you are not setting configurations in the config.js file nor a custom configuration file.

這段就不翻譯了，so,easy!

 

配置個性化工具欄：

 

A toolbar definition is a JavaScript array that contains the elements to be displayed in all "toolbar rows" available in the editor. There are two ways to set the desired toolbar definition in the editor. It can be set directly into the "toolbar" setting, or it can instead be set to a configuration named "toolbar_<name>", where "<name>" is a name that can be used to identify the toolbar in the "toolbar" setting. The following is the default setting we have in the editor.

上面的英文太羅嗦了說重點算了：工具欄是經過數組來設定的，工具欄的名字以toolbar_<name>的方式命名，其中的<name>是用來賦值給config.toolbar這一變量的。

那麼如下代碼定義了toolbar_Full和toolbar_Basic的兩種工具欄配置，並使用了config.toolbar = 'Full';定義當前的編輯器的工具欄爲Full。

其中("-") 爲空間欄的水平分割，("/") 爲換行。

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'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

Note that two toolbar definitions have been defined, one named "Full" and the other "Basic". The "Full" definition has been set to be used in the toolbar setting.

 

You can create as many toolbar definitions as you want inside the configuration file. Later, based on some criteria, you can decide the toolbar to use for each editor instance. For example, with the following code, two editors are created in the page, each one using a different toolbar:

你也能夠根據您的須要在配置文件中創建多個工具欄的定義，而後，能夠根據特定條件，決定使用哪一個定義。

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

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

It's also possible to set the toolbar definition in-page, when creating the editor instance directly. In that case, just assign it to the toolbar setting directly, for example:

也能夠經過IN-PAGE的方式定義工具欄參數。

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

 The Styles Definition

The styles definition is a JavaScript array which is registered by calling the CKEDITOR.addStylesSet() function. A unique name must be assigned to your style definition, so you can later set each editor instance to load it. It means that you can have a single style definition which is shared by several editor instances present on the page.

The following is a sample style definition registration:

經過CKEDITOR.addStylesSet() 函數，咱們能夠定義一個樣式，結合如下的例子，my_styles爲樣式的名稱，具體的樣式爲一個JAVASCRIPT數組。經過樣式的名稱我可讓頁面的多個編輯器應用該樣式。

CKEDITOR.addStylesSet( 'my_styles',
[
    // Block 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' } }
]);

The above definition registration can be placed inline in the page using the editor, or can even live in an external file, which is loaded "on demand", when needed only (see below).

樣式能夠經過IN-PAGE或配置文件中進行註冊。

After that, you must instruct the editor to use your newly registered style definition by using the stylesCombo_stylesSet setting. This may be set into the config.js file, for example:

你能夠經過在config.js 加入如下代碼使編輯器應用該樣式：

config.stylesCombo_stylesSet = 'my_styles';

 

Using an External Styles Definition File 使用自定義的樣式文件

You can include the above styles definition registration call into an external JavaScript file. This is the preferred way for it because it will be loaded only when opening the Styles selection box, enhancing the page loading performance. Users may feel a small loading gap because of it though.

By default, the editor uses the "plugins/stylescombo/styles/default.js" file, which is a "minified" JavaScript file. You can find the uncompressed version of it at "_source/plugins/stylescombo/styles/default.js". You can see it online at our SVN also: http://svn.fckeditor.net/CKEditor/trunk/_source/plugins/stylescombo/styles/default.js. It can be used as a template for your custom file.

Your style definition file can be saved anywhere at your web site (or the web). You must just know the URL to reach it. For example, you can save at it at the root of your web site, so you can reach it with "/styles.js", or even place it in a central web site, so you can locate it with "http://www.example.com/styles.js". At that point, simply change the stylesCombo_stylesSet setting to point the editor to your file:

默認的樣式文件在"_source/plugins/stylescombo/styles/default.js"目錄中，咱們也能夠本身定義一個樣式文件，如在站點的跟目錄中有styles.js這一個樣式文件，這個文件經過如下代碼指定其路徑：

config.stylesCombo_stylesSet = 'my_styles:/styles.js';

OR

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

Style Rules

The entries inside a style definition are called "style rules". Each rule defines the display name for a single style as well as the element, attributes and css styles to be used for it. The following is the generic representation for it:

{
    name : 'Display name',
    element : 'tag name (for example "span")',
    styles :
    {
        'css-style1' : 'desired value',
        'css-style2' : 'desired value',
        
    }
    attributes :
    {
        'attribute-name1' : 'desired value',
        'attribute-name2' : 'desired value',
        
    }
}

The "name" and "element" values are required, while other values are optional.

 

Style Types

There are three types of style types, each one related to the element used in the style rule:

• Block styles: applied to the text blocks (paragraphs) as a whole, not limited to the text selection. The elements values for that are: address, div, h1, h2, h3, h4, h5, h6, p and pre.
• Object styles: applied to special selectable objects (not textual), whenever such selection is supported by the browser. The elements values for that are: a, embed, hr, img, li, object, ol, table, td, tr and ul.
• Inline styles: applied to text selections for style rules using elements not defined in the other style types.

Output Formatting

 The HTML Writer

這個是用來對各類標籤的排版進行設定的

Technically speaking, writing the final output is a task executed by the CKEDITOR.htmlWriter class ("writer"), used by the CKEDITOR.htmlDataProcessor class. Therefore, the current writer instance for a specific editor instance can be retrieved by the <editorInstance>.dataProcessor.writer property.

By setting the writer properties, it's possible to configure several output formatting options. The following example is the best way to summarize the most used of them, with their default values:

var writer = editor.dataProcessor.write;

// The character sequence to use for every indentation step.
writer.indentationChars = '\t';

// The way to close self closing tags, like <br />.
writer.selfClosingEnd = ' />';

// The character sequence to be used for line breaks.
writer.lineBreakChars = '\n';

// Set writing rules for the <p> tag.
writer.setRules( 'p',
    {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent : true,

        // Insert a line break before the <p> tag.
        breakBeforeOpen : true,

        // Insert a line break after the <p> tag.
        breakAfterOpen : true,

        // Insert a line break before the </p> closing tag.
        breakBeforeClose : false,

        // Insert a line break after the </p> closing tag.
        breakAfterClose : true
    });

 

Setting Writer Rules

Because the writer is a property of each editor instance, and also because it's dependency on the writer plugin to be loaded, the best way to make changes to it is by listening to the "instanceReady" event, so it's safe to assume that the dataProcessor property will be loaded and ready to changes. The following is an example of it, when creating an editor instance:

能夠爲單一得編輯器指定標籤的格式。

CKEDITOR.replace( 'editor1',
    {
        on :
        {
            instanceReady : function( ev )
            {
                // Output paragraphs as <p>Text</p>.
                this.dataProcessor.writer.setRules( 'p',
                    {
                        indent : false,
                        breakBeforeOpen : true,
                        breakAfterOpen : false,
                        breakBeforeClose : false,
                        breakAfterClose : true
                    });
            }
        }
    });

Another way for it is by using the CKEDITOR object, so all editor instances will be changed:

也能夠對全部的編輯器進行設定。

CKEDITOR.on( 'instanceReady', function( ev )     {         // Out self closing tags the HTML4 way, like <br>.         ev.editor.dataProcessor.writer.selfClosingEnd = '>';     });