CKEditor 3.0(FCKEditor3.0)的简单安装配置使用

来源:互联网 发布:黑大网络教学平台 编辑:程序博客网 时间:2024/05/18 07:48

CKEditor 3.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>

或者:

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

这样,一个编辑器就基本可以使用了。

配置属于自己的编辑器,配置Config.js文件(官方给出配置的几种方法,详见参考官方文档)如下:

要先在网页里面加入下面脚本引入Config.js,并且Config.js要在ckeditor.js之前引入:

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

用记事本打开config.js文件,可看到下面代码:

CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:config.language = 'en';config.uiColor = '#F00';};

我们只需在函数里面加入自己需要配置的选项即可,例如本人配置的:

CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// config.language = 'zh-cn'; //配置语言//config.uiColor = '#FFF'; //背景颜色//config.width = 500; //宽度config.height = 500; //高度


//工具栏

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']];};


更详细配置选项,请参考官方文档http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.config.html


CKEditor瘦身:如果你觉得整个编辑器太大,你可以删除文件。

例如把_samples、_source、_tests三个文件夹删除,进入lang文件目录,保留en.js、zh.js、zh-cn.js三个文件,其余的语言文件如果你用不到,可以删除。


文章来源:http://hi.baidu.com/liuflin/blog/item/5cfe291f8ae1816af724e4cf.html



原创粉丝点击