feats

src/components/Wangedit/Wangedit.jsx

@@ -1,62 +1,58 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import E from 'wangeditor';
 import PreviewMenu from './PreviewMenu'
 import Preview from './Preview'
 import { fetch, apis } from '../../utils/request';
 
-/**
- * @param {*} props
- * @returns
- */
-class Wangedit extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      preview: false,
-      html: undefined,
-      contenteditable: props.contenteditable == false ? false : true
-    }
-    this.editor = undefined;
-  }
-
-  render() {
-    return (
-      <>
-        <div ref="editorElem" style={{ textAlign: 'left' }} />
-        <Preview width={426} style={{width: '426px', height: '863px', margin: 0, padding: 0}} visible={this.state.preview} html={this.state.html} onCancel={() => this.setState({preview: false})} />
-      </>
-    );
-  }
-
-  componentDidMount() {
-    const elem = this.refs.editorElem
-    this.editor = new E(elem)
-    // 使用 onchange 函数监听内容的变化
-    this.editor.config.onchange = html => {
-      this.setState({ html })
-
-      if (typeof this.props.onChange === 'function') {
-        this.props.onChange(html)
+export default props => {
+  const ref = useRef()
+  const editorRef = useRef()
+  const [preview, setPreview] = useState(false)
+  const [content, setContent] = useState()
+
+  // wangeditor 有bug, 初始先触发 onchange
+  const firstChanged = useRef(false)
+
+  const initEditor = useCallback(() => {
+    const editor = new E(ref.current)
+    editorRef.current = editor
+    
+    // 取消自动 focus
+    editor.config.focus = false
+
+    // 触发 change
+    editor.config.onchange = html => {
+      // 规避 bug
+      if (!firstChanged.current) {
+        firstChanged.current = true
+        return
+      }
+
+      setContent(html)
+
+      if (typeof props.onChange === 'function') {
+        props.onChange(html)
       }
     }
-    this.editor.config.zIndex = 100
-    this.editor.config.uploadImgMaxLength = 1
-    this.editor.config.customUploadImg = function (files, insert) {
+
+    editor.config.zIndex = 100
+
+    // 自定义图片上传
+    editor.config.uploadImgMaxLength = 1
+    editor.config.customUploadImg = function (files, insert) {
       if (!files.length) return
       
       const data = new FormData()
       data.append('file', files[0])
-
       fetch(apis.image.upload)({data}).then(insert)
-    }    
-
-    // 扩展按钮
-    this.editor.menus.extend('previewMenu', PreviewMenu)
-    PreviewMenu.preview = (html) => {
-      this.setState({preview: true})
     }
 
-    this.editor.config.menus = [
+    // 扩展预览按钮
+    editor.menus.extend('previewMenu', PreviewMenu)
+    PreviewMenu.preview = (html) => setPreview(true)
+
+    // 配置菜单
+    editor.config.menus = [
       'head',  // 标题
       'bold',  // 粗体
       'fontSize',  // 字号
@@ -74,10 +70,10 @@ class Wangedit extends React.Component {
       'redo',  // 重复
       'previewMenu'
     ]
-    
+
     // 过滤 word 字符
-    this.editor.config.pasteFilterStyle = false
-    this.editor.config.pasteTextHandle = function(content) {
+    editor.config.pasteFilterStyle = false
+    editor.config.pasteTextHandle = content => {
       const regs = [
         /<!--\[if [\s\S]*?endif\]-->/ig,
         /<[a-zA-Z0-9]+\:[^>]+>[^>]*<\/[a-zA-Z0-9]+\:[^>]+>/ig,
@@ -91,32 +87,33 @@ class Wangedit extends React.Component {
       }, content)
     }
 
-    this.editor.create()
-    this.editor.$textElem.attr('contenteditable',this.state.contenteditable);
-    this.editor.config.uploadImgShowBase64 = true
-    this.editor.txt.html(this.props.value)
-  }
+    editor.create()
+    editor.$textElem.attr('contenteditable', props.contenteditable !== false)
 
-  componentDidUpdate(props, state) {
-    if (this.props.value && !state.html) {
-      if (this.editor) {
-        this.editor.txt.html(this.props.value)
-      }
-    }
-  }
-
-  /**
-   *增加这个 shouldComponentUpdate 生命函数
-    处理自动聚焦到富文本上
-   *
-   * @param {*} nextProps
-   * @returns
-   * @memberof Wangedit
-   */
-  shouldComponentUpdate(nextProps) {
-    return nextProps.value !== this.editor.txt.html() || nextProps.preview !== this.state.preview
-  }
-}
+    return () => editor.destroy()
+  }, [props.contenteditable])
 
-export default Wangedit
+  useEffect(() => {
+    initEditor()
+  }, [])
+  
+  useEffect(() => {
+    if (props.value !== content && editorRef.current) {
+      setContent(props.value)
+      editorRef.current.txt.html(props.value)
+    }
+  }, [props.value])
 
+  return (
+    <>
+      <div ref={ref} style={{ textAlign: 'left' }} />
+      <Preview
+        width={426}
+        style={{width: '426px', height: '863px', margin: 0, padding: 0}}
+        visible={preview}
+        html={props.value}
+        onCancel={() => setPreview(false)}
+      />
+    </>
+  )
+}