ckeditor快速使用

<pre name="code" class="html">

基本操作

<!-- 引用CKeditor的js文件 -->
<script type="text/javascript" src="__PUBLIC__/ckeditor/ckeditor.js"></script>
<!-- 替换textarea标签 -->
<script type="text/javascript">
window.onload=function()
{

CKEDITOR.replace('description',
<!-- IN-PAGE配置方式(优先级最高)-->
{
        uiColor : '#9AB8F3',
        width : '700',
        height : '300'
    }
);
}
</script>

1.在非head区写法：

<script type="text/javascript">CKEDITOR.replace('description');</script>

2.CKEDITOR.appendTo(elementOrId, config) 它可以在特定的dom对象中创建CKEDITOR

属性配置

1.in-page

最好在创建编辑器的页面中配置你的编辑器属性，使用这种方式，你无需理会在CKEDITOR安装目录中的配置文件（ps:in-page的优先级最高）.

2.默认属性文件配置方式：

你也可以在config.js 中加入配置信息，当你打开该文件时你会发觉它几乎为空（默认）。你要做的是把配置信息加入其中。

3.自定义属性文件配置方式：

假设你在custom目录中有一自定义的配置文件ckeditor_config.js，那么就必须在创建ckeditor实例时制定它的路径（用customConfig属性）。

CKEDITOR.replace( 'description',{customConfig : '/custom/ckeditor_config.js'});

配置个性化工具栏：

工具栏是通过数组来设定的，工具栏的名字以toolbar_<name>的方式命名，其中的<name>是用来赋值给config.toolbar这一变量的。

那么以下代码定义了toolbar_Full和toolbar_Basic的两种工具栏配置，并使用了config.toolbar = 'Full';定义当前的编辑器的工具栏为Full。

其中("-") 为空间栏的水平分割，("/") 为换行。

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'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

提交内容：

在head部分中的js脚本添加

function fnOnSubmit(form){
for ( instance in CKEDITOR.instances ) 
CKEDITOR.instances[instance].updateElement(); 
}

在响应控制器方法中添加

dump($_POST);

图片处理：

1.处理预览中的文字：

config.image_previewText = '暂无图片';

ckeditor\plugins\image\dialogs\image.js

b.config.image_previewText||"...." 

2.图片上传的选项卡

{id:"info"

{id:"Link"

{id:"Upload",hidden:!0,    //修改hidden:0 显示上传选项卡

{id:"advanced"

3.上传功能配置

config.filebrowserUploadUrl = "actions/ckeditorUpload";

文件上传POST请求的URL，也就是点击这个按钮就会post到actions/ckeditorUpload进行处理

相当于<input  type="file" name="upload" .../>

参考来源：

http://www.cnblogs.com/Fskjb/archive/2009/11/16/1603461.html

http://blog.youkuaiyun.com/xiao__gui/article/details/7684505