富文本编辑器 CKeditor

官网地址: http://ckeditor.com

使用说明: http://docs.ckeditor.com

组件包

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

实例演示

replace 初始化(已开启拖拽、截图上传功能,仅支持部分浏览器【火狐、Chrome浏览器支持】)

请输入内容:


                        
注:由组件自动加载
inline 初始化方式(简洁模式)

请点击我~

请点击我~

请点击我~


                        
注:由组件自动加载

基础介绍、使用、注意项

1.多种初始化方式
    //替换模式,通过替换<textarea>或者一个DOM元素<div>
    CKEDITOR.replace('DOM元素/ID',config);
    
    //将带有 contenteditable="true" 的DOM元素<div>
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline('DOM元素/ID',config);
    
    //对DOM元素末尾追加
    CKEDITOR.appendTo('DOM元素/ID',config);

2.配置项 config.js
    //config.bodyId     //实际输入区域的ID
    config.language     //语言
    config.height       //输入区域高度
    config.toolbar      //工具栏配置
    config.toolbar_Basic        //工具栏_基础模式
    config.removePlugins        //删除组件
    //forcePasteAsPlainText     //强制粘贴时清除格式,截图粘贴时禁用
    /*图片配置*/
    config.imageUploadUrl       //图片(上传)
    //config.filebrowserImageUploadUrl      //图片(上传),打开图片上传功能(禁用)
    //config.removeDialogTabs       //去除图像窗口内容,使用了image2增强组件,所以禁用
    config.extraPlugins     //而外添加的组件
    
3.基础方法
    获取编辑器实例:
    1.var xxx=CKEDITOR.replace('DOM元素/ID',config);  通过初始化返回
    2.var xxx=CKEDITOR.instances['ID'];
    获取内容:getData();
    设置内容:setData();
    插入内容:insertHtml();
    插入内容(文本):insertText();
    摧毁:destroy();
    设置只读模式:setReadOnly(true/false)

4.关于图片上传及返回信息
    ck默认发送的字段:
    CKEditor:实例化时所用的ID
    CKEditorFuncNum:实例化时所对应的NUM
    
    1.imageUploadUrl
    通过拖拽、截图粘贴方式所请求的接口。
     返回信息:为一个JSON对象 {"fileName":"文件名","uploaded":"状态","url":"返回地址"}
     
    2.filebrowserImageUploadUrl
    通过点击图片按钮上传所请求的接口。
    返回信息:为一个js脚本 <script type="text/javascript">window.parent.CKEDITOR.tools.callFunction("实例化对象的num","地址");</script>
    注:实例化对象的num为发送请求时 CKEditorFuncNum 字段所对应的值
5.其它
  获取版本号:CKEDITOR.version