1

src/pages/Hr/Notification/components/RighEditor.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 // import SimpleMDE from 'react-simplemde-editor'
 // import MarkDown from 'react-markdown'
 // import 'easymde/dist/easymde.min.css'
@@ -6,6 +6,7 @@ import Vditor from 'vditor'
 import 'vditor/src/assets/scss/index.scss'
 
 const RighEditor = ({ value, onChange }) => {
+  const ref = useRef()
   const [cValue, setValue] = useState(value)
   // 完成！
   function handleEditorChange(content) {
@@ -14,7 +15,7 @@ const RighEditor = ({ value, onChange }) => {
   }
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const vditor = new Vditor('vditor', {
+    const vditor = new Vditor(ref.current, {
       height: 200,
       toolbarConfig: {
         pin: true
@@ -34,7 +35,7 @@ const RighEditor = ({ value, onChange }) => {
   }, [])
   return (
     // <MarkDown />
-    <div id="vditor" />
+    <div ref={ref} />
     // <MdEditor
     //   style={{ height: '300px' }}
     //   value={cValue}