Question

我正在尝试将js草案作为文本编辑器实现到我的next.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文档，将会看到可以应用初始配置对象，该对象将为其提供基本样式（您可以根据需要进一步自定义）。

将JS草稿实施到Next JS中，文本编辑器不会显示

1 个答案: