margox / braft-utils Goto Github PK

import 'braft-editor/dist/index.css'
import React, { PureComponent } from 'react'
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'
import { ImageUtils } from 'braft-finder'
import { Divider, Button, Form, Input, Select, Spin, Upload, Icon, message, InputNumber } from 'antd'

const FormItem = Form.Item

@Form.create()
class Operate extends PureComponent {
  state = {
    controls: ['bold', 'italic', 'underline', 'text-color', 'fullscreen'],
    editorState: BraftEditor.createEditorState(null),
  }

  handleChange = (editorState) => {
    this.setState({ editorState })
  }

  uploadHandler = (param) => {

    if (!param.file) {
      return false
    }
    const { editorState } = this.state
    const url = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    this.setState({
      editorState: ContentUtils.insertMedias(editorState, [{
        type: 'IMAGE',
        url: url,
      }]),
    })

  }

  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 17 } }
    const extendControls = [
      {
        key: 'antd-uploader',
        type: 'component',
        component: (
          <Upload accept="image/*" showUploadList={false} customRequest={this.uploadHandler}>
            <button type="button" className="control-item button upload-button" data-title="插入图片">
              <Icon type="picture" theme="filled"/>
            </button>
          </Upload>
        ),
      },
    ]
    const { controls, editorState } = this.state
    return (
      <div style={{ width: '720px' }}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="操作说明">
            {getFieldDecorator('content', {
              initialValue: editorState,
              validateTrigger: 'onBlur',
              rules: [{
                required: true,
                validator: (_, value, callback) => {if (value.isEmpty()) {callback('请输入操作说明')} else {callback()}}, }],
            })(
              <BraftEditor
                style={{ border: '1px solid #e5e5e5', borderRadius: '3px' }}
                onChange={this.handleChange}
                onFullscreen={this.handleFullscreen}
                controls={controls}
                extendControls={extendControls}
              />,
            )}
          </FormItem>
        </Form>
      </div>
    )
  }
}

export default Operate

 const editorState = BraftEditor.createEditorState(`<div>${props.value}</div` || '<div></div>');
    <BraftEditor
      ref={ref}
      controls={[]}
      extendControls={[
        {
          key: 'custom-button',
          type: 'button',
          text: '按钮',
          onClick: () => {
            console.log(editorState);
            const newEditorState = ContentUtils.toggleSelectionColor(editorState, '#f39c12');
            console.log(newEditorState.toHTML());
            // ref.current.refs.toggleSelectionColor('#ffffff')
            // ref.current?.handleKeyCommand('blob')
          },
        },
      ]}
```

通过ContentUtils 方法没办法进行颜色的修改，是调用的方式不对吗？