日期:2014-05-17  浏览次数:20379 次

在php中使用CKEDITOR在线编辑器

一、官方Download

1、CKEditor :点击CKEditor.NET标题下的“Download zip”按钮

下载的文件:ckeditor_aspnet_3.6.2.zip

?

二、页面使用

download CKEDITOR 3.6.1(默认是PHP版的),然后在调用页面的head中,写下如下两段js:

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

??? window.onload = function()
??? {
??????? CKEDITOR.replace('content' );
??? };

</script>

?

注意:这里的content是<textarea>的名称,如下所示:

3.6.2以前版本,该语句可能要写成:

<textarea name=”content”>欢迎访问 400电话受理中心 </textarea>

3.6.2版本,该语句可能要写成:

<textarea name="content" class="ckeditor">欢迎访问 http://www.my400800.cn </textarea>版本差异造成的问题,请大家在运行时注意这个问题。

在下一个页面根据name值content获取相应的值。

?

三、自定义常用工具

<script type="text/javascript">
??? // 示例1:设置工具栏为基本工具栏,高度为70
??? CKEDITOR.replace(‘<%=tbLink.ClientID.Replace("_","$") %>‘,
??? { toolbar:‘Basic‘, height:70 });
???
??? //示例2:工具栏为自定义类型
??? CKEDITOR.replace( ‘editor1‘,
??? {
??? toolbar :
??? ??? [
??? ??? //加粗 斜体, 下划线 穿过线 下标字 上标字
??? ??? [‘Bold‘,‘Italic‘,‘Underline‘,‘Strike‘,‘Subscript‘,‘Superscript‘],
??? ??? // 数字列表 实体列表 减小缩进 增大缩进
??? ??? [‘NumberedList‘,‘BulletedList‘,‘-‘,‘Outdent‘,‘Indent‘],
??? ??? //左对齐 居中对齐 右对齐 两端对齐
??? ??? [‘JustifyLeft‘,‘JustifyCenter‘,‘JustifyRight‘,‘JustifyBlock‘],
??? ??? //超链接 取消超链接 锚点
??? ??? [‘Link‘,‘Unlink‘,‘Anchor‘],
??? ??? //图片 flash 表格 水平线 表情 特殊字符 分页符
??? ??? [‘Image‘,‘Flash‘,‘Table‘,‘HorizontalRule‘,‘Smiley‘,‘SpecialChar‘,‘PageBreak‘],
??? ??? ‘/‘,
??? ??? // 样式 格式 字体 字体大小
??? ??? [‘Styles‘,‘Format‘,‘Font‘,‘FontSize‘],
??? ??? //文本颜色 背景颜色
??? ??? [‘TextColor‘,‘BGColor‘],
??? ??? //全屏 显示区块
??? ??? [‘Maximize‘, ‘ShowBlocks‘,‘-‘]
??? ??? ]
??? ??? }
??? );
</script>

?

?

?

三、配置编辑器

?

ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数:

// 界面语言,默认为 'en'
config.language = 'zh-cn';

// 设置宽高
config.width = 400;
config.height = 400;

// 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'
config.skin = 'v2';

// 背景颜色
config.uiColor = '#FFF';

// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js
config.toolbar = 'Basic';
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'],
??? '/',
??? ['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