feat: 增加练题

src/views/upload-questions/components/question-editor/index.jsx

@@ -1,77 +1,82 @@
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
-import React, {
-    useState, useEffect, forwardRef,
-    useImperativeHandle,
-} from 'react'
 import { Editor, Toolbar } from '@wangeditor/editor-for-react'
-
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
 
 // 当前菜单排序和分组
 
 function MyEditor(props, ref) {
-    // editor 实例
-    const [editor, setEditor] = useState(null)
+  // editor 实例
+  const [editor, setEditor] = useState(null)
 
+  // 编辑器内容
+  const [html, setHtml] = useState('<p></p>')
 
-    // 编辑器内容
-    const [html, setHtml] = useState('<p></p>')
+  // 工具栏配置
+  const toolbarConfig = {
+    excludeKeys: ['group-image', 'group-video']
+  }
 
+  // 编辑器配置
+  const editorConfig = {
+    placeholder: '请输入内容...'
+  }
 
-    // 工具栏配置
-    const toolbarConfig = {
-        excludeKeys: [
-            'group-image', 'group-video'
-        ]
+  const changeValue = html => {
+    setHtml(html)
+    props.onChange(html)
+  }
+
+  const onClear = () => setHtml('')
+
+  /**
+   * 回现代码
+   */
+  const onCashBack = () => {
+    let { cashBackText } = props
+    if (!!!cashBackText) {
+      return
     }
+    setHtml(`${cashBackText}`)
+    // editor.fo;
+  }
 
-    // 编辑器配置
-    const editorConfig = {
-        placeholder: '请输入内容...',
+  // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
+  useImperativeHandle(ref, () => ({
+    // onCallback 就是暴露给父组件的方法
+    onClear,
+    onCashBack
+  }))
+
+  // 及时销毁 editor ，重要！
+  useEffect(() => {
+    return () => {
+      if (editor == null) return
+      editor.destroy()
+      setEditor(null)
     }
+  }, [editor])
 
-
-    const changeValue = (html) => {
-        setHtml(html)
-        props.onChange(html)
-    }
-
-    const onClear = () => setHtml('')
-    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
-    useImperativeHandle(ref, () => ({
-        // onCallback 就是暴露给父组件的方法
-        onClear
-    }));
-
-    // 及时销毁 editor ，重要！
-    useEffect(() => {
-        return () => {
-            if (editor == null) return
-            editor.destroy()
-            setEditor(null)
-        }
-    }, [editor])
-
-    return (
-        <>
-            <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
-                <Toolbar
-                    editor={editor}
-                    defaultConfig={toolbarConfig}
-                    mode="default"
-                    style={{ borderBottom: '1px solid #ccc' }}
-                />
-                <Editor
-                    defaultConfig={editorConfig}
-                    value={html}
-                    onCreated={setEditor}
-                    onChange={editor => changeValue(editor.getHtml())}
-                    mode="default"
-                    style={{ height: '300px', overflowY: 'scroll' }}
-                />
-            </div>
-        </>
-    )
+  return (
+    <>
+      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
+        <Toolbar
+          editor={editor}
+          defaultConfig={toolbarConfig}
+          mode='default'
+          style={{ borderBottom: '1px solid #ccc' }}
+        />
+        <Editor
+          defaultConfig={editorConfig}
+          value={html}
+          onCreated={setEditor}
+          onChange={editor => changeValue(editor.getHtml())}
+          mode='default'
+          style={{ height: '300px', overflowY: 'scroll' }}
+        />
+      </div>
+    </>
+  )
 }
 
-export default forwardRef(MyEditor)
+export default forwardRef(MyEditor)