CKeditor 在網頁中的整合

1.在http://ckeditor.com/download上下載最新版本的CKeditor。將下載的文件解壓，而後將4M多的文件減肥：能夠刪掉_samples、_source、_tests這三個無用的文件夾；打開lang文件夾，刪掉除_languages.js、en.js、zh-cn.js之外的全部文件；若是你不用office2003和v2兩種皮膚，能夠把skin目錄下的這兩個目錄也都刪掉。這樣就作的了準備工做。

將ckeditor壓縮包解壓放在網站根目錄下的「ckeditor」文件夾裏：

引入ckeditor.js文件：

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

你也能夠將這些文件放在你網站的其餘任何一個地方，默認爲「ckeditor」。

 

2.在要使用ckeditor編輯器的地方插入腳本：

<script type="text/javascript">CKEDITOR.replace( '多行文本的name',{skin : "kama",width:520} );</script>

如：

<textarea cols="80" rows="10" name="message">Please input the content in here</textarea>

<script type="text/javascript">CKEDITOR.replace( 'message',{skin : "kama",width:520} );</script>

這樣就將name爲message的多行文本替換成了ckeditor編輯器形式的輸入框

 

3.獲取內容：

<?php

$message=$_POST['message'];

?>

4.自定義ckeditor

4-1.設置編輯器皮膚、寬高

如：

<textarea  cols="90" rows="10" id="content" name="content">cftea</textarea>

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<script type="text/javascript">

<!--

CKEDITOR.replace("content",

  {

      skin: "kama", width:700, height:300

  });

//-->

</script>

4-2.自定義ckeditor的工具欄：

CKEditor 工具欄是一個JavaScript數組，

數組裏麪包含了要顯示的工具的名字。

工具欄的命名規則爲：「toolbar_<name>」，

「<name>」是定義的工具欄名字。

下面代碼中是CKEditor默認定義好的兩個工具欄，

「Full」和「Basic」，而且默認使用的是「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'],

['BidiLtr', 'BidiRtl'],

'/',

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],

['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']

];

 (1)用戶能夠在config.js裏自定義工具欄：

CKEDITOR.editorConfig = function( config )

{

config.toolbar = 'MyToolbar';//把默認工具欄改成‘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']

];

};

你也能夠定義多個Toolbar，而後在不一樣的地方使用不一樣的toolbar屬性的設置：

CKEDITOR.replace( 'editor1',

{

    toolbar : 'MyToolbar'

});

 

CKEDITOR.replace( 'editor2',

{

    toolbar : 'Basic'

});

(2)你也能夠在調用CKEditor的地方直接定義新的工具欄

CKEDITOR.replace( 'editor1',

{

    toolbar :

    [

        ['Styles', 'Format'],

        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']

    ]

});

這樣網頁中也能夠有編輯器了。