CKEditor 3.0的简单安装配置使用

本文介绍CKEditor3.0的简易安装步骤及基本配置方法,包括下载、放置文件、引入脚本和配置编辑器。同时,提供自定义编辑器高度和工具栏的示例。

CKEditor 3.0的简单安装配置使用

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">

                这里是内容http://www.ff-bb.cn/logs/46479725.html

      </textarea>

     <script type="text/javascript">

      CKEDITOR.replace( 'editor1' );

     </script>

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

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

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

用记事本打开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']

];

};

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

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

例如把_samples、_source、_tests三个文件夹删除,进入lang文件目录,保留en.js、zh.js、zh-cn.js三个 文件,其余的语言文件如果你用不到,可以删除。
更详细配置选项,请参考官方文档 http://docs.fckeditor.net /CKEditor_3.x/Developers_Guide

转载于:https://my.oschina.net/u/141969/blog/609480

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值