将 Draft JS 实现到 Next JS 中，文本编辑器不会显示

Question

我正在尝试在我的 next.js 项目中实现草稿 js 作为文本编辑器。我已经根据官方指南实现了所有代码，但文本编辑器不会显示。这是我的代码

index.js

import React, { Component } from 'react'
import { useRouter, Router } from 'next/router';
import Layout from '../../components/MyLayout';
import Settings from '../../components/Settings';
import MyEditor from '../../components/TextEditor';
import fetch from 'isomorphic-unfetch';
import {Editor, EditorState} from 'draft-js';

const Post = (props) => {
    const router = useRouter();
    const object = props.post.data[0];
  return (
    <Layout>
      <h1>{object.title}</h1>
      <div className="p-2 border bg-light text-right text-dark">Oleh: {object.username}</div>
      <MyEditor/>
    </Layout>
  );
}

Post.getInitialProps = async function(context) {
    const {id} = context.query;
    const FormData = new URLSearchParams();
    FormData.append('slug',`${id}`);
    const res = await fetch(Settings.api+'viewPost',{
        'method': 'POST',
        'body': FormData
    });
    const post = await res.json();
    console.log('aw');
    return {
        post
    };
};

export default Post;

TextEditor.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

export default function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

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

我非常感谢任何答案。谢谢

Answer 1

看起来你做对了——Draft-js 是一个非常低级的编辑工具，你可以在它之上构建富文本编辑——我猜编辑器实际上是在页面，但您没有添加任何工具栏或复杂的初始状态，所以您只是看到一个空白页面。

我在这里复制了一个超级基本的 Next JS 示例：https://codesandbox.io/s/naughty-swirles-7nmbf?file=/pages/index.js，您会看到编辑器本身是“不可见的”，因为没有应用样式，也没有工具栏。如果您进一步查看 Draft-js 文档，您会发现您可以应用初始配置对象，从而为其提供基本样式（您可以根据需要进一步自定义）。