如何使用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应用程序中。