RichText 富文本编辑器

富文本编辑器。

何时使用

当用户需要富文本编辑输入时。

代码演示

基本使用

基本使用。

RichText富文本编辑器 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { RichText, Switch } from 'choerodon-ui/pro';
  4. const style = { height: 200 };
  5. class App extends React.Component {
  6. state = { readOnly: true };
  7. handleChange = (value) => {
  8. this.setState({ readOnly: value });
  9. };
  10. render() {
  11. const { readOnly } = this.state;
  12. return (
  13. <>
  14. <RichText readOnly={readOnly} style={style} defaultValue={[{"insert":"readOnly"}]} />
  15. <Switch style={{ paddingTop: 10 }} onChange={this.handleChange} checked={readOnly}>readOnly</Switch>
  16. </>
  17. );
  18. }
  19. }
  20. ReactDOM.render(<App />, document.getElementById('container'));

简单的格式化工具栏

简单的格式化工具栏,数组写法工具栏在 RichText 组件内,外层包裹需考虑工具栏高度。

RichText富文本编辑器 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { RichText, Switch } from 'choerodon-ui/pro';
  4. const style = { height: 200 };
  5. const options = {
  6. modules: {
  7. toolbar: [
  8. ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  9. ['blockquote', 'code-block'],
  10. [{ 'header': 1 }, { 'header': 2 }], // custom button values
  11. [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  12. [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
  13. [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
  14. [{ 'direction': 'rtl' }], // text direction
  15. [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
  16. [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  17. [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
  18. [{ 'font': [] }],
  19. [{ 'align': [] }],
  20. ['clean'], // remove formatting button
  21. ],
  22. imageDropAndPaste: false,
  23. },
  24. };
  25. class App extends React.Component {
  26. state = { mode: 'editor' };
  27. handlePreviewChange = (value) => {
  28. console.log(value);
  29. this.setState({ mode: value ? 'preview' : 'editor' });
  30. };

受控

受控

RichText富文本编辑器 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { RichText } from 'choerodon-ui/pro';
  4. const style = { height: 200 };
  5. class App extends React.Component {
  6. state = {
  7. value: [{insert: "Controlled Value"}],
  8. // string 类型值会被转为 Delta 对象
  9. // value: "Controlled Value",
  10. };
  11. handleChange = (value, oldValue) => {
  12. console.log('handleChange', value, oldValue)
  13. this.setState({ value });
  14. };
  15. render() {
  16. return <RichText value={this.state.value} style={style} onChange={this.handleChange} />;
  17. }
  18. }
  19. ReactDOM.render(<App />, document.getElementById('container'));

绑定数据源

绑定数据源

RichText富文本编辑器 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { RichText, DataSet, Button } from 'choerodon-ui/pro';
  4. const style = { height: 200 };
  5. const defaultValue = [{ 'insert': 'defaultValue' }];
  6. class App extends React.Component {
  7. ds = new DataSet({
  8. autoCreate: true,
  9. fields: [
  10. { name: 'content', type: 'object', defaultValue, required: true },
  11. ],
  12. });
  13. toData = () => {
  14. console.log('toData', this.ds.toData());
  15. };
  16. toJSONData = () => {
  17. console.log('toJSONData', this.ds.toJSONData());
  18. };
  19. getRecord = () => {
  20. console.log('getRecord toData', this.ds.current.get('content'));
  21. };
  22. setRecord = () => {
  23. this.ds.current.set('content', [{ 'insert': 'set value' }]);
  24. // set string 类型值会被转为 Delta 对象,并出现 type 类型转换 warning
  25. // this.ds.current.set('content',"set string value");
  26. };
  27. handleChange = (value, oldValue) => {
  28. console.log('handleChange', value, oldValue);
  29. };
  30. render() {
  31. return <>

自定义工具栏

自定义工具栏。

RichText富文本编辑器 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { RichText, DataSet, Modal } from 'choerodon-ui/pro';
  4. import { Icon } from 'choerodon-ui';
  5. import { observer } from 'mobx-react';
  6. const defaultValue = [{ insert: 'defaultValue' }];
  7. const style = { height: 200 };
  8. const modalKey = Modal.key();
  9. const { RichTextViewer } = RichText;
  10. @observer
  11. class App extends React.Component {
  12. ds = new DataSet({
  13. autoCreate: true,
  14. fields: [{ name: 'content', type: 'object', defaultValue, required: true }],
  15. });
  16. handleFullScreenClick = () => {
  17. console.log('handleFullScreenClick');
  18. Modal.open({
  19. key: modalKey,
  20. title: 'Full screen',
  21. children: (
  22. <RichText
  23. toolbar={this.renderCustomToolbar}
  24. dataSet={this.ds}
  25. name="content"
  26. style={{ height: 600 }}
  27. />
  28. ),
  29. fullScreen: true,
  30. });
  31. };
  32. renderCustomToolbar = ({ id, dataSet }) => {
  33. console.log('id', id, 'dataSet', dataSet);
  34. return (
  35. <div id={id}>
  36. <button type="button" className="ql-bold" />
  37. <button type="button" className="ql-italic" />
  38. <button type="button" className="ql-underline" />
  39. <button type="button" className="ql-strike" />
  40. <button type="button" className="ql-blockquote" />
  41. <button type="button" className="ql-list" value="ordered" />
  42. <button type="button" className="ql-list" value="bullet" />
  43. <button type="button" className="ql-image" />
  44. <button type="button" className="ql-link" />
  45. <select className="ql-color" />
  46. <button

API

RichText

属性说明类型默认值
options编辑器配置,详见Quill Optionsobject
mode编辑器模式,可选值 editor previewstringeditor
toolbar工具栏,可选值为钩子或者内置类型:normal nonestring({ dataSet, id }) => ReactNode

更多属性请参考 FormField

RichText.RichTextViewer

参数说明类型默认值
deltaOps编辑器渲染值Delta.ops

toolbar

自定义工具栏文档 Custom Toolbar