• 富文本编辑器组件


    说明

    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