实例演示

注：由组件自动加载

注：由组件自动加载

基础介绍、使用、注意项

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     //而外添加的组件
    //config.allowedContent: true, //开启自定义内容支持(不进行内容过滤，可维护任何内容)
    config.contentsCss = [ '/css/mysitestyles.css', '/css/anotherfile.css' ];  //用于将样式应用于编辑器内容的CSS文件,注意“内联及全页”模式下无效；默认为 CKEDITOR.getUrl( 'contents.css' )
    
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