我正在尝试弄清楚TinyMCE中React的保存插件是如何工作的。我希望用户能够单击保存按钮,并将内容保存到数据库中(此处未包含代码),但无论我尝试什么,都会得到错误Error: No form element found。例如,请考虑以下组件:
const Component = () => {
const [editorContent, setEditorContent] = useState('');
const handleEditorInit = () => {
setEditorContent(someInitialContent);
}
const handleEditorChange = (content, editor) => {
setEditorContent(content);
console.log(content); // correctly shows formatted content
}
const handleOnSubmit = (content, editor) => {
console.log(content); // correctly shows formatted content
}
return (
<Fragment>
<Editor
apiKey="api-key"
id="my-editor"
value={editorContent}
init={{
menubar: false,
inline: true,
plugins: [
'advlist lists image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount save'
],
toolbar:
'undo redo | bold italic underline backcolor forecolor | \
removeformat | save'
}}
onEditorChange={handleEditorChange}
onInit={handleEditorInit}
onSubmit={handleOnSubmit} // doesn't get rid of the error
/>
</Fragment>
);
}当呈现上述组件时,内容将显示在编辑器中,并且可以格式化(粗体/下划线等)。没有任何问题。onInit、onEditorChange和onSubmit事件处理程序可以正常工作(接收格式化内容),但是当我单击工具栏上的保存按钮时,仍然收到错误no form element found。
我尝试过将<Editor>组件包装在<form>标记中,也尝试过使用TinyMCE提供的onSaveContent事件处理程序,但仍然收到错误。我不明白为什么无论有没有表单元素,我都会得到Error: no form element found错误。我到处寻找解决方案,但似乎找不到一个。特别是不是一个专门针对反应的。我已经发现了类似的问题,here和here,但我仍然被困在它上面,不知道解决方案如何适用于React。
我的实现是错误的吗?或者有人知道我的实现出了什么问题吗?
任何帮助都是非常感谢的。提前谢谢你。
发布于 2020-07-22 05:45:57
save插件用于提交包含底层TinyMCE <textarea>的标准save表单。如果您正在使用React,我怀疑您的表单提交将通过一些React特定的JavaScript处理,而不是通过标准的HTML表单,因为标准表单提交会刷新整个页面,这与React或其他SPA框架的操作方式大相径庭。
https://stackoverflow.com/questions/62939016
复制相似问题