reactjs 中的富文本编辑器答案

【问题标题】：Rich text editor in reactjsreactjs 中的富文本编辑器
【发布时间】：2022-10-20 16:01:31
【问题描述】：

如何在 Reactjs 中创建富文本编辑器并保存输入的值并在控制台中显示？我已尝试以下代码，但无法保存该值。

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

【问题讨论】：

你到底想把它保存在哪里？
我想将它保存在一个状态，然后将它发送到数据库

标签： reactjs wysiwyg console.log rich-text-editor draftjs

【解决方案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>
  )
 }

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

【讨论】：

如何将对象显示为字符串/仅访问文本？
developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…这可能会帮助你
就我的回答而言，地图不是已经只记录了文本吗？
它只记录文本，但我想将整个文本保存在一个状态并发送到我的 php 文件
将其设置为状态并对 webhook.php 执行获取请求作为一个想法。我不知道你的全部目标

【解决方案2】：

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
'''

【讨论】：