如何使用 Next.js 实现富文本编辑器，例如 Quill 或 Draft.js？

Question

我有一个大型应用程序，我正在使用 Next.js 构建用于 SEO 和性能目的，并且该应用程序的一个超级交互部分需要文本编辑器（例如 Quill.js 或 Draft.js），其中的数据位于使用 Socket.io 在两个用户之间同步。

问题是我无法让文本编辑器与 Next.js 一起工作。

当我导入 Quill 时，它显示“文档未定义”，因为服务器上没有文档。使用 Draft.js，它根本不渲染任何东西，但没有错误。

这是我的 Draft.js 代码：

import { EditorState, convertToRaw, convertFromRaw } from 'draft-js'


class TextEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createWithContent(convertFromRaw(props.contentState))
    }
  }
  static async getInitialProps ({ query, req }) {
    return { contentState: convertToRaw(EditorState.createEmpty().getCurrentContent()) }
  }
  render() {
    console.log('init',this.props.editorState);
    return (
      <div>
        <h1>Test Editor</h1>
        <Editor
          editorState={ this.props.editorState }
        />
      </div>
    );
  }
}

有什么帮助吗？

Answer 1

我认为这个nextjs-with-draftjs示例可以帮助您将 Draft.js 集成到 Next.js 应用程序中。

Answer 2

使用sun编辑器。这个非常灵活并且与 nextjs 兼容。 https://www.npmjs.com/package/suneditor-react npm 我是 suneditor suneditor-react

import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File to the _app.js

const SunEditor = dynamic(() => import("suneditor-react"), { //besure to import dynamically
  ssr: false,
});

const MyComponent = props => {
  return (
    <div>
      <p> My Other Contents </p>
      <SunEditor />
    </div>
  );
};
export default MyComponent;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

这是我的简单组件正在使用 NextJS 和 React Hook Form

import React, { useEffect } from "react";
import { Editor, EditorState, ContentState, convertFromRaw } from "draft-js";
import "draft-js/dist/Draft.css";

export { EditorState, ContentState };

interface PropTypes {
  name?: string;
  value?: string;
  onChange?: Function;
}

// Trick to fix issue with NextJS https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/universal/editor.js
const emptyContentState = convertFromRaw({
  entityMap: {},
  blocks: [
    {
      text: "",
      key: "foo",
      type: "unstyled",
      entityRanges: [],
    },
  ],
});

function RichTextEditor({ name, value, onChange }: PropTypes) {
  const [editorState, setEditorState] = React.useState(
    EditorState.createWithContent(emptyContentState)
  );

  useEffect(() => {
    setEditorState(
      EditorState.createWithContent(ContentState.createFromText(value))
    );
  }, []);

  return (
    <Editor
      editorKey={name}
      editorState={editorState}
      onChange={(editorState) => {
        setEditorState(editorState);

        onChange(editorState.getCurrentContent().getPlainText());
      }}
      userSelect="none"
      contentEditable={false}
    />
  );
}

export default RichTextEditor;

<Controller
 as={RichTextEditor}
 name="description"
 control={control}
 defaultValue=""
/>