Блог

Главная - Вопросы по программированию - Содержательный редактор Richtext не отображается на Next.js

Содержательный редактор Richtext не отображается на Next.js

#reactjs #next.js #content-management-system #contentful #richtext

Вопрос:

В настоящее время я создаю блог с Next.js и Довольный. Все шло хорошо, пока я не столкнулся с проблемами с редактором 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>
      );
    }

Отрисованный форматированный текст

Ответ №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 amp;amp; <br key={index} />, textSegment];
    }, []);
  },
};

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

Вы можете найти более подробные текстовые советы в этой статье.

Комментарии:

1. Спасибо, что нашли время прокомментировать и помочь! К сожалению, это все еще не работает? Я все еще получаю тот же результат. Я поделился большим количеством кода в этом посте. Не уверен, что это как-то связано с тем, как я использую Next js или Попутный ветер?

2. Также HTML-теги, похоже, не работают — > например, теги H3 не появляются при входе в консоль

3. Вы смотрели на пользовательский рендерер? Фрагменты все еще не включают его. 🙂 Что вы регистрируете? Окружающий код не должен иметь значения. Это действительно documentToReactComponents важно .

4. Так что мне удалось решить эту проблему. Это произошло из-за Попутного ветра, перекрывающего стили! Спасибо, что не оставляешь меня в покое!

Ответ №2:

Таким образом, причина, по которой это происходило, заключалась в том, что Попутный ветер отменял стили из Удовлетворительных.

Для того, чтобы решить эту проблему:

Установка: Типография Попутного ветра

Вот ссылка на решение из tailwind

Метки: