CKEditor 3.0 配置

CKEditor 3.0安裝配置，感覺比較簡單，但本次沒有涉及上傳檔案的配置，下篇文章將寫一下如何將CKEditor的兄弟產品:ckfinder　功能強大的上傳檔案管理工具整合進 CKEditor3.0

下載CKEditor 3.0，地址：http://ckeditor.com/

首先，下載下來解壓後，把檔案夾ckeditor放到你的網站。

其次，在你的網頁裡面加入下面指令碼：

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

注意紅色部分，這雷根據你自己的編輯器路徑修改，請務必配置正確。

再次，在需要引用CKEditor編輯器的地方加入下面代碼：

            <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
                這裡是內容
            </textarea>
            如果你是ASP.NET開發人員　可以寫成：
            <textarea class="ckeditor" id="txtContent" runat="server" name="txtContent"></textarea>

或者：

      <textarea cols="80" id="editor1" name="editor1" rows="10">
                這裡是內容
      </textarea>
     <script type="text/javascript">
      CKEDITOR.replace( 'editor1' );
     </script>

 

這樣，一個編輯器就基本可以使用了。

--------------------------------------------------

配置屬於自己的編輯器，配置Config.js檔案（官方給出配置的幾種方法，詳見參考官方文檔）如下：

http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.config.html#.autoUpdateElement
用記事本開啟config.js檔案，可看到下面代碼：

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
 config.language = 'zh-cn'; //配置語言
//config.uiColor = '#FFF'; //背景顏色
//config.width = 500; //寬度
config.height = 400; //高度
config.skin='v2';
//工具列
config.toolbar =
[
    ['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','-','Source','-','Undo','Redo']

];
};

為了減少編輯器的大小，可以刪除一些不必要的檔案，如把_samples、_source、_tests三個檔案夾刪除，進入lang檔案目錄，保留en.js、zh.js、zh-cn.js三個檔案，其餘的語言檔案如果你用不到，可以刪除。