CKEditor 3.0 配置 使用

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/sgivee/archive/2009/09/17/4561657.aspx

CKEditor 3.0 配置 使用
2009-09-11 21:17
CKEditor 3.0安装配置，感觉比较简单，但本次没有涉及上传文件的配置，下篇文章将写一下如何将CKEditor的兄弟产品:ckfinder　功能强大的上传文件管理器整合进 CKEditor3.0

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

首先，下载下来解压后，把文件夹ckeditor放到你的站点。

其次，在你的网页里面加入下面脚本：

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

注意红色部分，这里根据你自己的编辑器路径修改，请务必配置正确。

再次，在需要引用CKEditor编辑器的地方加入下面代码：

Html代码

1.       <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">  
2.           这里是内容   
3.        </textarea>  
4.        如果你是ASP.NET开发人员　可以写成：   
5.        <textarea class="ckeditor" id="txtContent" runat="server" name="txtContent"></textarea>  
6.   
7.   
8.   
9. <textarea cols="80" id="editor1" name="editor1" rows="10">  
10.           这里是内容   
11. </textarea>  
12. lt;script type="text/javascript">  
13. CKEDITOR.replace( 'editor1' );   
14. lt;/script>  

            <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文件，可看到下面代码：

Js代码

1. CKEDITOR.editorConfig = function( config )   
2. {   
3. // Define changes to default configuration here. For example:   
4. config.language = 'zh-cn'; //配置语言   
5. //config.uiColor = '#FFF'; //背景颜色   
6. //config.width = 500; //宽度   
7. config.height = 400; //高度   
8. config.skin='v2';   
9. //工具栏   
10. config.toolbar =   
11. [   
12.     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],   
13.     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],   
14.     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],   
15.     ['Link','Unlink','Anchor'],   
16.     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],   
17.     '/',   
18.     ['Styles','Format','Font','FontSize'],   
19.     ['TextColor','BGColor'],   
20.     ['Maximize', 'ShowBlocks','-','Source','-','Undo','Redo']   
21.   
22. ];   
23. };  

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三个文件，其余的语言文件如果你用不到，可以删除。