reactjs - toast 编辑器 getHTML() 最大堆栈错误

Question

目前我正在使用 React 和 Next.js，由于韩语错误，我想应用 Toast Editor ui 而不是 Froala Editor。Tui 编辑器不支持 SSR，所以我已经从 Next.js 应用了动态导入。

但是，当我将 tui 编辑器的内容转换为 HTML 格式时，我遇到了 getHTML() 最大调用堆栈错误。getMarkdown() 目前完美运行。

以下是代码。

// path: components/WrappedToastEditor.js
import React from 'react'
import PropTypes from 'prop-types'
import { Editor } from '@toast-ui/react-editor'

const WrappedEditor = (props) => {
  const { forwardedRef } = props
  return <Editor {...props} ref={forwardedRef} />
}

WrappedEditor.propTypes = {
  forwardedRef: PropTypes.shape({
    current: PropTypes.instanceOf(Element)
  }).isRequired
}

export default WrappedEditor;

// path: components/ToastEditorComponent.js
import React, {forwardRef, useRef, useCallback } from 'react';
import dynamic from 'next/dynamic';

const Editor = dynamic(() => import("./WrappedToastEditor"), { ssr: false });
const EditorWithForwardedRef = forwardRef((props, ref) => (
  <Editor {...props} forwardedRef={ref} />
));

const ToastEditorComponent = (props) => {
  const editorRef = useRef(null);
  const handleChange = useCallback(() => {
    if (!editorRef.current) {
      return;
    }

    //! getHTML() maximum call stack error. need to figure out how to fix
    // console.log(editorRef.current.getInstance().getHTML())
    // This is the part that has a maximum call stack error
    const value = editorRef.current.getInstance().getHTML();
    props.onChange(value);
  }, [props, editorRef]);

  return <div>
    <EditorWithForwardedRef
      {...props}
      previewStyle="vertical"
      height="600px"
      initialEditType="wysiwyg"
      useCommandShortcut={true}
      ref={editorRef}
      onChange={handleChange}
      hideModeSwitch={true}
    />
  </div>;
};

export default ToastEditorComponent;

标签： reactjsfroalatui