qm-bus/src/QMUeditor/index.js

千米公有云业务组件库

import React from 'react'
import scriptLoader from 'react-async-script-loader'
import assign from 'object-assign'
import { QMDialog } from 'qm-ux'
import { QMImg } from 'qm-ui'

import { splitObject } from '../util/ObjectUtil'
import GalleryBox from '../GalleryBox'
const _QM_UM_CSS = 'qm_umeditor_css'
const _QM_UM_CSS_HREF =
  '//pic.qianmi.com/admin/js/plugins/umeditor/themes/default/css/umeditor.min.css'
const noop = () => undefined

/**
 * @author gcy[of1518]
 * @date 2017.03
 */
@scriptLoader(
  [
    '//pic.qianmi.com/admin/js/plugins/umeditor/third-party/jquery.min.js',
    '//pic.qianmi.com/admin/js/plugins/umeditor/third-party/template.min.js',
  ],
  [
    '//pic.qianmi.com/admin/js/plugins/umeditor/umeditor.config.js',
    '//pic.qianmi.com/admin/js/plugins/umeditor/umeditor.js',
  ],
  '//pic.qianmi.com/admin/js/plugins/umeditor/lang/zh-cn/zh-cn.js'
)
export default class QMUeditor extends React.PureComponent {
  ueEditor = {}
  static defaultProps = {
    id: 'ueditor',
    content: '',
    async: false,
    style: { width: '100%', height: '280px' },
    onChange: noop,
    ready: noop,
  }

  constructor(props) {
    super(props)
    this.state = {
      valueInitial: false,
    }

    //全局添加
    window.gallery = _selected => {
      return QMDialog.load(<GalleryBox hash="_gallery" limit={10 - _selected} />, {
        width: 800,
        title: '选择图片',
        className: 'modal-custom select-picture-library',
      }).then(res => {
        return (res || []).map(i => {
          return QMImg.src({ src: i.path })
        })
      })
    }

    //dom对象写入link标签
    this.appendStyleElement()
  }

  componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed, content }) {
    if (isScriptLoaded && !this.props.isScriptLoaded) {
      // load finished
      if (isScriptLoadSucceed) {
        this.initUeditor()
      }
    } else if (this.props.isScriptLoaded) {
      let self = this
      let { valueInitial } = this.state
      if (!valueInitial && this.props.async) {
        this.setState({ valueInitial: true }, () => self.ueEditor.setContent(content))
      }
    }
  }

  componentDidMount() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props
    if (isScriptLoaded && isScriptLoadSucceed) {
      this.initUeditor()
    }
  }

  componentWillUnmount() {
    //组件注销时，销毁ue对象
    UM.delEditor('ueditor')

    //组件注册时，销毁css
    this.removeStyleElement()
  }

  render() {
    let [props, { content }] = splitObject(this.props, ['id', 'style'])
    content = content || ''
    return <script ref="_qm_ueditor" {...props} dangerouslySetInnerHTML={{ __html: content }} />
  }

  /**
   * init
   */
  initUeditor = () => {
    const { onChange } = this.props
    this.ueEditor = UM.getEditor(
      'ueditor',
      assign(
        {
          toolbar: [
            'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
            'insertorderedlist insertunorderedlist | selectall cleardoc | fontfamily fontsize',
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink | image video  | map',
            '| horizontal preview fullscreen',
            'drafts',
            'formula',
          ],
          zIndex: 850,
          initialFrameHeight: 400,
          autoHeightEnabled: true,
          wordCount: false,
          disabledTableInTable: false,
          videoAllowFiles: [],
        },
        this.props.options || {}
      )
    )
    this.ueEditor.ready(() => {
      this.props.ready(this.ueEditor)
      this.ueEditor.addListener('contentChange', () => onChange(this.ueEditor.getContent()))
      this.ueEditor.addListener('contentChange', () => onChange(this.ueEditor.getContent()))
    })
  }

  /**
   * 注册css
   */
  appendStyleElement = () => {
    let node = document.getElementById(_QM_UM_CSS)
    if (!!node) {
      node.href = _QM_UM_CSS_HREF
    } else {
      let link = document.createElement('link')
      link.id = _QM_UM_CSS
      link.rel = 'stylesheet'
      link.href = _QM_UM_CSS_HREF
      document.head.appendChild(link)
    }
  }

  /**
   * 销毁css
   */
  removeStyleElement = () => {
    let node = document.getElementById(_QM_UM_CSS)
    node.href = ''
  }
}