tinymce 不支持 React hook 形式

发布于 2025-01-12 00:02:53 字数 1415 浏览 3 评论 0原文

我在 NextJS typescript 项目中使用 TinyMCE markdown 编辑器和 React Hook Form。如果我在没有 react-hook-form 的情况下使用 TinyMCE，它可以正常工作。

我在将其与 react-hook-form 一起使用时遇到问题。我可以看到 editorRef.current.getContent() Html 数据输出。但是 data 输出是空对象。

有什么想法这里可能有什么问题吗？

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { useForm } from 'react-hook-form';

export default function App() {
  const editorRef = useRef<any>(null);
  const { register, handleSubmit } = useForm();  

  const submitData = (data) => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
    console.log(data);
  };
  
  return (
    <>
      <form onSubmit={handleSubmit(submitData)}>
        <Editor
          onInit={(evt, editor) => (editorRef.current = editor)}
          initialValue=""
          init={{
            height: 500,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount',
            ]
          }}
        />
        <input type="submit" />
      </form>
    </>
  );
}

原文

I am using TinyMCE markdown editor with react Hook Form inside NextJS typescript project. TinyMCE works fine if I am using it without react-hook-form.

I am getting issues while using it with react-hook-form.
I can see editorRef.current.getContent() Html data output. But data output is empty object.

Any ideas what might be wrong here?

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { useForm } from 'react-hook-form';

export default function App() {
  const editorRef = useRef<any>(null);
  const { register, handleSubmit } = useForm();  

  const submitData = (data) => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
    console.log(data);
  };
  
  return (
    <>
      <form onSubmit={handleSubmit(submitData)}>
        <Editor
          onInit={(evt, editor) => (editorRef.current = editor)}
          initialValue=""
          init={{
            height: 500,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount',
            ]
          }}
        />
        <input type="submit" />
      </form>
    </>
  );
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉服软 2025-01-19 00:02:53

我已经成功使用 RHF Controller 围绕tinyMCE 包装器（v7.25）编辑器 (v5.10) 如果有帮助的话

回复收藏 0 原文

暮年 2025-01-19 00:02:53

如上所述，使用控制器包装器可以正常工作。我能够成功使用tinymce和react-hook-form，如下所示：

<Controller
      control={control} name={name}
      render={({field, field:{ onChange}}) => (
        <Editor
          id={name}
          textareaName="content"
          ref={field.ref}
          apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
          onEditorChange={onChange}
          init={{
            height: 200,
            menubar: false,
            plugins: [],
            toolbar:
              "undo redo | formatselect | " +
              "bold italic backcolor | alignleft aligncenter " +
              "alignright alignjustify | bullist numlist outdent indent | " +
              "removeformat | help",
            "content_style":
              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px, }"
          }}
        />
      )}/>

确保您从控制器提供onEditorChange和onChange函数，您应该可以开始了

As Mentioned above using the Controller Wrapper works ok. Im able to successfully use tinymce and react-hook-form like the following:

<Controller
      control={control} name={name}
      render={({field, field:{ onChange}}) => (
        <Editor
          id={name}
          textareaName="content"
          ref={field.ref}
          apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
          onEditorChange={onChange}
          init={{
            height: 200,
            menubar: false,
            plugins: [],
            toolbar:
              "undo redo | formatselect | " +
              "bold italic backcolor | alignleft aligncenter " +
              "alignright alignjustify | bullist numlist outdent indent | " +
              "removeformat | help",
            "content_style":
              "body { font-family:Helvetica,Arial,sans-serif; font-size:14px, }"
          }}
        />
      )}/>

Ensure you supply the onEditorChange with the onChange function from the controller and you should be good to go

回复收藏 0 原文

~没有更多了~