margox / braft-editor Goto Github PK

            <FormItem
              {...formItemLayout}
              label="正文"
            >
              {getFieldDecorator('content', {
                rules: [{
                  required: true, message: '请输入正文',
                }],
              })(
                <BraftEditor {...editorProps} />
              )}
            </FormItem>

import React from 'react';
import { upload } from '@hlj/ajax/src/ajax';
import Popup from '@hlj/widget/Popup';
import { convertFromHTML } from 'draft-js';
import { isString } from 'lodash';
import BraftEditor from 'braft-editor';

import 'braft-editor/dist/braft.css';
import './style.scss';

class Marked extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      content: this.props.source,
      editing: false
    };
  }

  componentDidMount() {
    const { source } = this.props;
    if (isString(source)) {
      const content = convertFromHTML(source);
      this.setState({ content })
    }
  }

  render() {
    const { title } = this.props;
    const { editing, content } = this.state;

    return (
      <div className="marked field">
        <label>{title}</label>
        <div>
          <button type="button" className="ui button"
              onClick={() => this.setState({ editing: true })}>
            <i className="edit icon"></i>
          </button>
        </div>
        {
          editing &&
            <Popup className="draft-editor">
              <div className="bg" onClick={::this.onClose}></div>
              <div className="wrapper">
                <BraftEditor
                  initialContent={content}
                  controls={[
                    'undo', 'redo', 'split', 'font-size', 'font-family', 'text-color',
                    'bold', 'italic', 'underline', 'strike-through', 'superscript',
                    'subscript', 'text-align', 'split', 'headings', 'list_ul', 'list_ol',
                    'split', 'link', 'split', 'media'
                  ]}
                  media={{
                    image: true, // 开启图片插入功能
                    video: false, // 开启视频插入功能
                    audio: false, // 开启音频插入功能
                    uploadFn: ::this.uploadImg // 指定上传函数
                  }}
                  onChange={::this.onChange}
                  onHTMLChange={::this.onHTMLChange}
                />
              </div>
            </Popup>
        }
      </div>
    );
  }

  onHTMLChange(html) {
    this.setState({ html });
  }

  onChange(raw) {
    this.setState({ content: raw });
  }

  onClose() {
    const { content, html } = this.state;
    const { update } = this.props;
    console.log(content);
    debugger
    update && update({ source: content, html });
    this.setState({ editing: false });
  }

  uploadImg(e) {
    if (!e || !e.file) {
      return Promise.reject();
    }

    return upload(e.file, '/images').then(({ url }) => (
      e.success({ url })
    )).catch(ex => {
      window.console.error(ex);
      e.error({ msg: 'unable to upload.' });
    });
  }
}

export default Marked;

// 转换成raw
initEditorState = () => {
    // content是html字符串
    const { content } = this.props;
    const blockHTML = convertFromHTML(content);
    const contentState = ContentState.createFromBlockArray(blockHTML.contentBlocks, blockHTML.entityMap);
    return convertToRaw(contentState);
  }

// 编辑器的配置
    const initialContent = this.initEditorState();
    const editorProps = {
      initialContent，
}

const editorProps = {
  placeholder: 'Hello World!',
  initialContent: '',
  onHTMLChange: this.handleHTMLChange,
  viewWrapper: '.demo',
  // 增加自定义预览按钮
  extendControls: [
    {
      type: 'split',
    },
    {
      type: 'button',
      text: '预览',
      className: 'preview-button',
      onClick: () => {
        window.open().document.write(this.state.htmlContent)
      }
    }, {
      type: 'dropdown',
      text: <span>下拉菜单</span>,
      component: <h1 style={{width: 200, color: '#ffffff', padding: 10, margin: 0}}>Hello World!</h1>
    }, {
      type: 'modal',
      text: <span style={{paddingRight: 10,paddingLeft: 10}}>弹窗</span>,
      className: 'modal-button',
      modal: {
        title: '这是一个弹窗',
        showClose: true,
        showCancel: true,
        showConfirm: true,
        confirmable: true,
        onConfirm: () => console.log(1),
        onCancel: () => console.log(2),
        onClose: () => console.log(3),
        children: (
          <div style={{width: 480, height: 320, padding: 30}}>
            <span>Hello World！</span>
          </div>
        )
      }
    }
  ]
}

return (
  <div className="demo">
    <BraftEditor {...editorProps} />
  </div>
)

const editorProps = {
            height: 500,
            contentFormat: 'html',
            initialContent: '<div><img /></div><p></p>',
            onHTMLChange: this.handleHTMLChange,
            media: {
                image: true, // 开启图片插入功能
                video: false, // 开启视频插入功能
                audio: false, // 开启音频插入功能
                validateFn: null, // 指定本地校验函数，说明见下文
                uploadFn: this.uploadFn.bind(this) // 指定上传函数，说明见下文
            },
            controls: [
                'bold', 'italic', 'underline', 'strike-through', 'text-align', 'split',
                'headings', 'list_ul', 'list_ol', 'blockquote', 'split',
                'link', 'media'
            ]
        }