reactjs中的富文本编辑器

Question

如何在Reactjs中创建一个富文本编辑器，并将输入的值保存在控制台/将值保存在状态中并将其发送到php文件？我尝试过以下代码，但无法保存值。

import React from 'react'
import { Editor } from "react-draft-wysiwyg";
import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";


const TextEditor = () => {
  return (
    <div>
       <Editor
         toolbarClassName="toolbarClassName"
         wrapperClassName="wrapperClassName"
         editorClassName="editorClassName"
         wrapperStyle={{ width: 1000, border: "1px solid black" }}
      />
    </div>
  )
}

export default TextEditor

Answer 1

就文档而言，-> https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp (节属性，编辑器状态部分)

您有一个onChange属性，可以从中侦听并记录其中的当前值：

function App() {
  const [first, setfirst] = useState("")
  console.log(first.blocks.map(x => x.text))

  return (
    <div>
      <Editor
       toolbarClassName="toolbarClassName"
       wrapperClassName="wrapperClassName"
       editorClassName="editorClassName"
       onChange={(e) => setfirst(e)}
      />
     </div>
  )
 }

或者，如果您愿意，也可以记录整个对象。

Answer 2

const TextEditor = (props) => {

    const [data, setData] = useState("")

    const handleChange = (event) => {
        setData(event)
    }

    const handleSubmit = (e) => {
        e.preventDefault();

        let myPara = data.blocks.map(x => { return x.text })

        const sendData = {
            pid: props.data,
            para: myPara[0]  //stores the entire text written in the text 
            //editor in 'para' which can then be stored 
            //in a  db table                    
        }

        axios.post('http://localhost/api/texteditor.php', sendData)
            .then((result) => {
                if (result.data.Status === 'Invalid') {
                    alert('Invalid data');
                }
                else {
                    alert("Data added successfully");
                }
            })
    }

    return (
        <div>
            <form onSubmit={(e) => { handleSubmit(e) }}>
                <Editor
                    toolbarClassName="toolbarClassName"
                    wrapperClassName="wrapperClassName"
                    editorClassName="editorClassName"
                    wrapperStyle={{ width: 1000, border: "1px solid black" }}
                    onChange={handleChange}
                />

                <input className='save d-flex justify-content-left'
                    type="submit" name="save" value="Save" style=
                    {{
                        backgroundColor: "white", color: "blue",
                        border: "1px solid blue"
                    }}
                />
            </form>
        </div>
    )
}

export default TextEditor