CODEWITHSUNDEEP
reactjswysiwygconsole.logrich-text-editordraftjs
ss2022
ss2022

Reputation: 1

Rich text editor in reactjs

How to create a rich text editor in Reactjs and save the value entered and show it in console/ save the value in a state and send it to php file ? I have tried the below code but cannot save the value.

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

Upvotes: 0

Views: 1040

Answers (2)

ss2022
ss2022

Reputation: 1

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

Upvotes: 0

Daniel Baychev
Daniel Baychev

Reputation: 64

As far as the documentation goes -> https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp (Section properties, Editor state part)

You have a onChange property from which you can listen to and log the current value inside it:

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>
  )
 }

Or if you wish, you could also log the entire object.

Upvotes: 0

Related Questions