如何在Nuxt 3中将Strapi Editor-JS的JSON富文本渲染为HTML？

你的Strapi富文本输出是Editor.js格式的JSON数据，下面提供两种可落地的渲染方案：

方案一：使用Editor.js官方渲染库 #

1. 安装依赖 #

npm install @editorjs/render

2. 在组件中实现渲染 #

创建或修改页面/组件，引入渲染库并处理数据：

<template>
  <div ref="renderContainer"></div>
</template>

<script setup>
import Renderer from '@editorjs/render'
import { ref, onMounted } from 'vue'
import { useRuntimeConfig } from '#app'

const renderContainer = ref(null)
const config = useRuntimeConfig()
// 替换为你从Strapi获取的富文本数据
const strapiRichText = {
  "time":1679496880268,
  "blocks":[/* 你的块数据 */],
  "version":"2.23.2"
}

onMounted(async () => {
  const renderer = new Renderer()
  // 处理图片URL，拼接Strapi服务地址
  const processedBlocks = strapiRichText.blocks.map(block => {
    if (block.type === 'image') {
      return {
        ...block,
        data: {
          ...block.data,
          file: {
            ...block.data.file,
            url: `${config.public.strapiBaseUrl}${block.data.file.url}`
          }
        }
      }
    }
    return block
  })
  // 渲染为HTML并插入容器
  const html = await renderer.render(processedBlocks)
  renderContainer.value.innerHTML = html
})
</script>

3. 配置Strapi基础地址 #

在nuxt.config.ts中添加公共配置：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      strapiBaseUrl: 'http://你的Strapi服务地址:1337'
    }
  }
})

方案二：自定义组件渲染（无需第三方库） #

如果需要更灵活的样式控制，可自定义组件处理每种块类型。

1. 创建主渲染组件 components/EditorRenderer.vue #

<template>
  <div class="editor-content">
    <component 
      v-for="block in processedBlocks" 
      :key="block.id" 
      :is="getBlockComponent(block.type)" 
      :block="block" 
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRuntimeConfig } from '#app'

const props = defineProps({
  content: {
    type: Object,
    required: true
  }
})

const config = useRuntimeConfig()

// 处理图片URL
const processedBlocks = computed(() => {
  return props.content.blocks.map(block => {
    if (block.type === 'image') {
      return {
        ...block,
        data: {
          ...block.data,
          file: {
            ...block.data.file,
            url: `${config.public.strapiBaseUrl}${block.data.file.url}`
          }
        }
      }
    }
    return block
  })
})

// 根据块类型返回对应组件
const getBlockComponent = (type) => {
  switch(type) {
    case 'paragraph':
      return 'ParagraphBlock'
    case 'image':
      return 'ImageBlock'
    // 可扩展支持其他类型（如header、list等）
    default:
      return 'DefaultBlock'
  }
}
</script>

2. 创建子组件 #

• ParagraphBlock.vue（处理段落）：

<template>
  <p v-html="block.data.text"></p>
</template>

<script setup>
defineProps({
  block: {
    type: Object,
    required: true
  }
})
</script>

• ImageBlock.vue（处理图片）：

<template>
  <figure>
    <img 
      :src="block.data.file.url" 
      :alt="block.data.file.alt || block.data.caption" 
    />
    <figcaption v-if="block.data.caption">{{ block.data.caption }}</figcaption>
  </figure>
</template>

<script setup>
defineProps({
  block: {
    type: Object,
    required: true
  }
})
</script>

• DefaultBlock.vue（处理未支持的块类型）：

<template>
  <div class="unsupported-block">未支持的内容类型：{{ block.type }}</div>
</template>

<script setup>
defineProps({
  block: {
    type: Object,
    required: true
  }
})
</script>

3. 在页面中使用 #

<template>
  <EditorRenderer :content="strapiRichText" />
</template>

<script setup>
// 替换为你从Strapi获取的富文本数据
const strapiRichText = { /* 你的Editor.js JSON数据 */ }
</script>

内容的提问来源于stack exchange，提问作者Nyx47