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

Answer 3

import React, { useEffect, useRef } from 'react';

interface RichTextEditorProps {
  initialValue?: string;
  onChange: (value: string) => void;
}

const RichTextEditor: React.FC<RichTextEditorProps> = ({ initialValue = '', onChange }) => {
  const editorRef = useRef<HTMLDivElement>(null);

  const applyBlueTextStyle = (text: string) => {
    // This regex matches text within brackets and ensures to catch brackets across multiple lines if needed
    const regex = /\[([^\]]+)\]/g;
    return text.replace(regex, (match) => `<span style="color: blue;">${match}</span>`);
  };

  const handleInput = () => {
    if (editorRef.current) {
      // We don't apply styling directly on input to avoid contentEditable caret issues.
      // Instead, we call onChange to let the parent know about the change.
      onChange(editorRef.current.innerHTML);
    }
  };

  // Use useEffect to parse and apply styles when the component mounts or initialValue changes
  useEffect(() => {
    if (editorRef.current) {
      editorRef.current.innerHTML = applyBlueTextStyle(initialValue);
    }
  }, [initialValue]);

  return (
    <div>
      <div
        ref={editorRef}
        contentEditable
        onInput={handleInput}
        style={{ border: '1px solid #ccc', minHeight: '100px', padding: '5px' }}
      ></div>
    </div>
  );
};

export default RichTextEditor;