Question

我是Prismic的新手，它尝试使用PrismicDOM.RichText.asText来拉出一个页面，并且可以正常工作，但是当我尝试使用asHtml显示一个节/字段时，它会显示文字html代码。正在搜索文档，并尝试了 HTML序列化器，但仍无法正常工作。也许我想念一些东西。

<script>
import Prismic from "prismic-javascript";
import PrismicConfig from "~/prismic.config.js";
import PrismicDOM from "prismic-dom";
import linkResolver from "~/plugins/link-resolver.js";
import htmlSerializer from "~/plugins/html-serializer.js";

export default {
  async asyncData({ context, error, req }) {
    try {
      const api = await Prismic.getApi(PrismicConfig.apiEndpoint, { req });

      let document = {};
      const result = await api.getSingle("homepage");
      document = result.data;
      const title = PrismicDOM.RichText.asText(document.title);
      const desc = PrismicDOM.RichText.asText(document.summary);
      const cta = PrismicDOM.RichText.asHtml(document.job_extra, linkResolver, htmlSerializer); //Display as Html

      if (process.client) window.prismic.setupEditButton();

      return {
        document,
        title,
        cta,
        desc,
        documentId: result.id
      };
    } catch (e) {
      error({ statusCode: 404, message: "Page not found" });
    }
  }
};
</script>

Answer 1

您还必须定义一个HTML serializer并将其传递给：

import PrismicDOM from 'prismic-dom'
import Prismic from 'prismic-javascript'
import PrismicConfig from '~/prismic.config.js'
import linkResolver from '~/plugins/link-resolver.js'
import htmlSerializer from '~/plugins/html-serializer.js'

  async asyncData({ params, error, req }) {
    try {
      // Fetching the API object
      const api = await Prismic.getApi(PrismicConfig.apiEndpoint, { req })
      // Query to get the home page content
      let post = {};
      const result = await api.getByUID('post', params.slug);
      post = result.data;

      const body = PrismicDOM.RichText.asHtml(
        post.body,
        linkResolver,
        htmlSerializer
      )

      return {
        // Event item content
        post,
        body
      }
    } catch (e) {
      error({ statusCode: 404, message: 'Page not found' })
    }
  },

在棱镜nuxtjs中将部分显示为序列化html

1 个答案: