富文本编辑器组件

说明

HZero前端工程集成了CKEditor富文本编辑器,可以满足各类基本文档的编写,其中还包含了图片/附件的上传/插入文档等等功能,关于CKEditor请参考如下地址

https://ckeditor.com/ckeditor-4/

名词解释

bucketName

bucketName是桶名，不同的桶对上传文件在类型、大小、数量等属性的限制不同，所以在使用上传组件前要确定使用的桶名。

使用示例

// 引入组件
import RichTextEditor from 'components/RichTextEditor';
// import RichTextEditor from 'hzero-front/lib/components/RichTextEditor';

// ...

// 组件使用
<RichTextEditor
  ref={node => { this.richTextEditor = node; }}
  readOnly={false}
  content="<a>Hello World!</a"
/>

组件效果如下

组件属性说明

参数	说明	类型	默认值	版本
readOnly	是否不可编辑	`boolean`	false	0.11.0
ref	react组件`ref`属性	`function(node)`	-	0.11.0
content	富文本编辑器内容	`string`	-	0.11.0
bucketName	图片/附件上传桶名	`string`	‘static-text’	0.11.0
config	`CKEditor`富文本编辑器配置属性	`object`	-	0.11.0
onEditorChange	富文本编辑器获取内容onChange事件	`function(constent<string>)`	-	0.11.0
onChange	默认onChange事件	`function({ editor })`	-	0.11.0

服务端部署ckeditor

RichTextEditor采用异步加载的方式加载ckeditor的静态资源,所以需要将如下目录的ckeditor静态资源文件复制到编译生成的静态文件目录下

// 拷贝ckeditor静态资源目录
/node_modules/hzero-front/public/lib/ckeditor

// 拷贝到编译生成的静态文件目录下
/dist/lib/ckeditor