首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用保存插件时,React中的TinyMCE‘错误:找不到表单元素’

使用保存插件时,React中的TinyMCE‘错误:找不到表单元素’
EN

Stack Overflow用户
提问于 2020-07-17 00:14:46
回答 1查看 447关注 0票数 0

我正在尝试弄清楚TinyMCE中React的保存插件是如何工作的。我希望用户能够单击保存按钮,并将内容保存到数据库中(此处未包含代码),但无论我尝试什么,都会得到错误Error: No form element found。例如,请考虑以下组件:

代码语言:javascript
复制
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>
  );
}

当呈现上述组件时,内容将显示在编辑器中,并且可以格式化(粗体/下划线等)。没有任何问题。onInitonEditorChangeonSubmit事件处理程序可以正常工作(接收格式化内容),但是当我单击工具栏上的保存按钮时,仍然收到错误no form element found

我尝试过将<Editor>组件包装在<form>标记中,也尝试过使用TinyMCE提供的onSaveContent事件处理程序,但仍然收到错误。我不明白为什么无论有没有表单元素,我都会得到Error: no form element found错误。我到处寻找解决方案,但似乎找不到一个。特别是不是一个专门针对反应的。我已经发现了类似的问题,herehere,但我仍然被困在它上面,不知道解决方案如何适用于React。

我的实现是错误的吗?或者有人知道我的实现出了什么问题吗?

任何帮助都是非常感谢的。提前谢谢你。

EN

回答 1

Stack Overflow用户

发布于 2020-07-22 05:45:57

save插件用于提交包含底层TinyMCE <textarea>的标准save表单。如果您正在使用React,我怀疑您的表单提交将通过一些React特定的JavaScript处理,而不是通过标准的HTML表单,因为标准表单提交会刷新整个页面,这与React或其他SPA框架的操作方式大相径庭。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62939016

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档