我正在使用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;
1条答案
按热度按时间ssm49v7z1#
使用quill的delta属性会更好,这有助于将json对象中的文本保存到数据库中,如果你想恢复所有格式的文本,可以使用JSON.parse()。