RichText 富文本编辑器

富文本编辑器。

何时使用

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

代码演示

基本使用

基本使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, Switch } from 'choerodon-ui/pro';
​
const style = { height: 200 };
​
class App extends React.Component {
  state = { readOnly: true };
​
  handleChange = (value) => {
    this.setState({ readOnly: value });
  };
​
​
  render() {
    const { readOnly } = this.state;
    return (
      <>
        <RichText readOnly={readOnly} style={style} defaultValue={[{"insert":"readOnly"}]} />
        <Switch style={{ paddingTop: 10 }} onChange={this.handleChange} checked={readOnly}>readOnly</Switch>
      </>
    );
  }
}
​
ReactDOM.render(<App />, document.getElementById('container'));
​
​

简单的格式化工具栏

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, Switch } from 'choerodon-ui/pro';
​
const style = { height: 200 };
​
const options = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
​
      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],                         // text direction
​
      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
​
      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
​
      ['clean'],                                         // remove formatting button
    ],
    imageDropAndPaste: false,
  },
};
​
class App extends React.Component {
  state = { mode: 'editor' };
​
  handlePreviewChange = (value) => {
    console.log(value);
    this.setState({ mode: value ? 'preview' : 'editor' });
  };
​

受控

受控

import React from 'react';
import ReactDOM from 'react-dom';
import { RichText } from 'choerodon-ui/pro';
​
const style = { height: 200 };
​
​
class App extends React.Component {
  state = {
    value: [{insert: "Controlled Value"}],
    // string 类型值会被转为 Delta 对象
    // value: "Controlled Value",
  };
​
  handleChange = (value, oldValue) => {
    console.log('handleChange', value, oldValue)
    this.setState({ value });
  };
​
  render() {
    return <RichText value={this.state.value} style={style} onChange={this.handleChange} />;
  }
}
​
ReactDOM.render(<App />, document.getElementById('container'));
​

绑定数据源

绑定数据源

​
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, DataSet, Button } from 'choerodon-ui/pro';
​
const style = { height: 200 };
​
const defaultValue = [{ 'insert': 'defaultValue' }];
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'content', type: 'object', defaultValue, required: true },
    ],
  });
​
  toData = () => {
    console.log('toData', this.ds.toData());
  };
​
  toJSONData = () => {
    console.log('toJSONData', this.ds.toJSONData());
  };
​
  getRecord = () => {
    console.log('getRecord toData', this.ds.current.get('content'));
  };
​
  setRecord = () => {
    this.ds.current.set('content', [{ 'insert': 'set value' }]);
    // set string 类型值会被转为 Delta 对象，并出现 type 类型转换 warning
    // this.ds.current.set('content',"set string value");
  };
​
  handleChange = (value, oldValue) => {
    console.log('handleChange', value, oldValue);
  };
​
  render() {
    return <>

自定义工具栏

自定义工具栏。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { RichText, DataSet, Modal } from 'choerodon-ui/pro';
import { Icon } from 'choerodon-ui';
import { observer } from 'mobx-react';
​
const defaultValue = [{ insert: 'defaultValue' }];
​
const style = { height: 200 };
​
const modalKey = Modal.key();
​
const { RichTextViewer } = RichText;
​
@observer
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [{ name: 'content', type: 'object', defaultValue, required: true }],
  });
​
  handleFullScreenClick = () => {
    console.log('handleFullScreenClick');
    Modal.open({
      key: modalKey,
      title: 'Full screen',
      children: (
        <RichText
          toolbar={this.renderCustomToolbar}
          dataSet={this.ds}
          name="content"
          style={{ height: 600 }}
        />
      ),
      fullScreen: true,
    });
  };
​
  renderCustomToolbar = ({ id, dataSet }) => {
    console.log('id', id, 'dataSet', dataSet);
    return (
      <div id={id}>
        <button type="button" className="ql-bold" />
        <button type="button" className="ql-italic" />
        <button type="button" className="ql-underline" />
        <button type="button" className="ql-strike" />
        <button type="button" className="ql-blockquote" />
        <button type="button" className="ql-list" value="ordered" />
        <button type="button" className="ql-list" value="bullet" />
        <button type="button" className="ql-image" />
        <button type="button" className="ql-link" />
        <select className="ql-color" />
        <button

API

RichText

更多属性请参考 FormField。

RichText.RichTextViewer

toolbar

自定义工具栏文档 Custom Toolbar