Next.js 上未显示内容富文本编辑器

Question

我目前正在使用 Next.js 和 Contentful 创建博客。一切都很顺利，直到我遇到 Richtext 编辑器的问题。

显示的是内容，但是行与行之间没有间距？

不确定如何让它看起来像我在 Contentful 上创建的那样。

const client = createClient({
  space: process.env.NEXT_CONTENTFUL_SPACE_ID,
  accessToken: process.env.NEXT_CONTENTFUL_ACCESS_TOKEN,
});

export async function getStaticPaths() {
  const res = await client.getEntries({
    content_type: "joshBlog",
  });

  return {
    paths: res.items.map((item) => ({
      params: { slug: item.fields.slug },
    })),
    fallback: true,
  };
}

export async function getStaticProps({ params }) {
  const res = await client.getEntries({
    content_type: "joshBlog",
    "fields.slug": params.slug,
  });

  return {
    props: {
      joshBlog: res.items[0],
    },
    revalidate: 30,
  };
}

export default function Article({ joshBlog }) {
    return (
        <div>
          <Head>
            <title>{joshBlog.fields.title}</title>
            <meta name="description" content={joshBlog.fields.description} />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <main className="mx-8 max-h-full md:px-40 px-4 pt-16 md:mx-24">
            <h1 className="text-2xl font-black pb-2 leading-9 mb-2 md:leading-relaxed md:text-4xl md:mb-4">
              {joshBlog.fields.title}
            </h1>
            <p className="mb-4 text-xs text-gray-600 font-light md:mb-10">
              {" "}
              Published: {joshBlog.fields.date}
            </p>
    
            <p className="font-light leading-6 text-xs mt-8 pb-2 text-justify text-gray-800 mb-2 md:font-normal md:text-base md:leading-loose">
              {joshBlog.fields.description}
            </p>
            <hr className="mt-4"></hr>
    
            <div className="">
              {documentToReactComponents(joshBlog.fields.content)}
            </div>
          </main>
        </div>
      );
    }

Rich text rendered

Answer 1

因为 Richtext 必须与平台保持无关，所以 Richtext 包含换行符 \n。这些不会在 React 中呈现为换行符。

你可以做的是定义一个 renderOptions 对象，调整 renderText 方法并将选项传递给 documentToReactComponents。

const renderOptions = {
  renderText: text => {
    // break the string apart and inject <br> elements
    return text.split('\n').reduce((children, textSegment, index) => {
      return [...children, index > 0 && <br key={index} />, textSegment];
    }, []);
  },
};

// pass in render options and split text nodes on line breaks with a `<br>`.
documentToReactComponents(joshBlog.fields.content, renderOptions)

You can find more Richtext tips in this article.

Answer 2

所以发生这种情况的原因是 Tailwind 覆盖了 Contentful 的样式。

为了解决这个问题：

安装：Tailwind Typography

这是 link 来自 tailwind

的解决方案

Next.js 上未显示内容富文本编辑器

Contentful Richtext Editor not showing on Next.js

content-management-system

richtext

reactjs

contentful

next.js