javascript 如何有效地将数据从react-quill存储到后端

enxuqcxy  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(212)

我正在使用react制作一个简单的博客网站,我使用react-quill,我无法找出将react-quill编辑器中的数据存储到后端的最佳方法。从我的代码中,我得到的内容已经用html标记格式化。我想以一种有效存储数据并从服务器检索数据的方式存储数据。它显示所有的格式,例如粗体文本,斜体...下面是示例代码。如果有一种方法可以改进我的代码,请随时告诉我:)

import { useState } from 'react';
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.bubble.css";

const Create = () => {
    const [body, setBody] = useState('');
    const handleBody = (e) => {
        console.log(e)
        setBody(e)
    }
    return (
        <main>
            <div className="form-container">
                <form>
                    <h2>create post</h2>
                    <ReactQuill
                        placeholder='spread your message...'
                        modules={Create.modules}
                        formats={Create.formats}
                        onChange={handleBody}
                        value={body}
                    />
                    <button id="submit-btn">post</button>
                </form>
            </div>
        </main>
    )
}

Create.modules = {
    toolbar: [
      [{ 'font': [] }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      ['bold', 'italic', 'underline'],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{ 'align': [] }],
      [{ 'color': [] }, { 'background': [] }],
      ['link', 'image'],
      ['code-block'],
      ['clean']
    ]
};

Create.formats = [
    'font',
    'size',
    'bold', 'italic', 'underline',
    'list', 'bullet',
    'align',
    'color', 'background',
    'link',
    'image',
    'code-block'
  ];

export default Create;
ssm49v7z

ssm49v7z1#

使用quill的delta属性会更好,这有助于将json对象中的文本保存到数据库中,如果你想恢复所有格式的文本,可以使用JSON.parse()。

相关问题