官网地址: http://ckeditor.com
使用说明: http://docs.ckeditor.com
组件包
<script src="../js/plugins/ckeditor/ckeditor.js" type="text/javascript"></script>
请输入内容:
注:由组件自动加载
请点击我~
请点击我~
请点击我~
注:由组件自动加载
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