时间戳

首页 > 解决方案 > 绕过 Prismic 的不足

富文本编辑器中的元素功能

html - 绕过 Prismic 的不足
富文本编辑器中的元素功能

问题描述

我开始使用 Prismic 作为前一个项目的无头 CMS，它运行良好，但在第二个项目中，我遇到了一个令我惊讶的问题，那就是 Prismic 无法进行简单的块引用。考虑到这个 HTML 元素在 HTML 中已经存在了几十年，这让我大吃一惊。根据他们的文档和论坛回复，他们正在考虑将其添加到他们的编辑器中，但是您必须通过使用标签并将它们应用到您的文本来跳过箍，这只是将文本包装在<span>具有您的标签名称类的标签中. 在您的前端，您必须使用 CSS 来定位这些跨度。

在他们的富文本编辑器中存在这个问题，如果您有一个要在较大的文本正文中引用的多段落块，编辑器会将它们视为多个段落，因此在您的输出中，而不是一个大块 -就像你会得到一个标准<blockquote>标签 - 你会得到多个段落包裹在单独的<span>标签中，这更难看起来像一个只有 CSS 的块。

<p><span class="my-label">Paragraph 1 text</span></p>
<p><span class="my-label">Paragraph 2 text</span></p>
<p><span class="my-label">Paragraph 3 text</span></p>
<p><span class="my-label">Paragraph 4 text</span></p>

我正在使用 的 Nuxt 应用程序中执行此操作v-html，并且由于突出显示的文本可能位于较大文本正文中的任何位置，因此我真的不想在 html 序列化程序或 api 数据中进行代码体操来识别标记的项目. 我真的不想为了解决这个问题而不得不切换到另一个 CMS 或本地降价。

当我尝试定位标签时，尝试这样做会变得很有挑战性，以使所有东西看起来都像一个大块。

  1. 是否有任何 Prismic 用户知道我可以<blockquote>在 Prismic 编辑器本身的内容中实际获取标签的方法？在他们的编辑器中没有编辑原始 html 的选项，即使使用切片，我也没有看到在内容中插入标签的方法。
  2. 有没有一种简单的 CSS 方法来定位这些多个段落，使它们看起来像一个块？我不是 CSS 专家，看起来它需要对填充和行高进行一些微调。

标签： htmlcssvue.jsprismic.io

解决方案

关于 Prismic 端的解决方案，使用切片的想法是使用切片区域为基本文本创建一个简单的“RichText”切片，并为执行花哨的引号创建另一个“BlockQuote”切片。切片定义可能如下所示：

{
  "type": "Slices",
  "fieldset": "Slice zone",
  "config": {
    "labels": {
      "richtext": [],
      "blockquote": []
    },
    "choices": {
      "richtext": {
        "type": "Slice",
        "fieldset": "Rich Text",
        "description": "Rich text slice",
        "icon": "reorder",
        "display": "list",
        "non-repeat": {
          "text": {
            "type": "StructuredText",
            "config": {
              "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
              "allowTargetBlank": true,
              "label": "Text"
            }
          }
        },
        "repeat": {}
      },
      "blockquote": {
        "type": "Slice",
        "fieldset": "Block Quote",
        "description": "Block Quote slice",
        "icon": "format_quote",
        "display": "list",
        "non-repeat": {
          "text": {
            "type": "StructuredText",
            "config": {
              "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
              "allowTargetBlank": true,
              "label": "Text"
            }
          }
        },
        "repeat": {}
      }
    }
  }
}

然后它只是循环遍历数组，以这种方式：

<template>
  <prismic-rich-text v-for="slice in document.data.body" :field="slice.primary.text" :class="slice.slice_type" />
</template>

推荐阅读