回到所有的课程
课程库

富文本域概述

富文本字段用于可以从设计器或编辑器中的CMS面板中格式化的长格式内容。

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆这个项目

而一个纯文本字段用于创建短格式、未格式化的文本,而富文本字段用于可在设计器或编辑器中的集合面板中格式化的长格式内容。富文本字段允许您的合作者自由创建和格式化他们的内容。可以在中显示富文本字段收藏列表收藏页面.您还可以使用富文本字段来筛选Collection列表,或者在Collection页面和列表中的元素上设置条件可见性。

共同使用
  • 大多数带有链接的长格式内容
  • 博客文章
  • 文章
  • 团队成员简历
  • 欧宝体育在线首页产品描述
  • 事件详细信息
在左侧,为富文本设置的自定义字段由文本和图像填充。右边是设计器中富文本块元素的结果,在Collection设置中输入了相同的文本和图像。
专业技巧
当您想让合作者能够进一步样式化文本时,富文本就很方便了。如果您不希望协作者拥有此能力,则纯文本字段将是更好的选择。
在这节课中
  • 创建富文本字段
  • 创建富文本内容
  • 在设计中显示动态富文本
  • 样式化嵌套在富文本字段中的元素
  • 使用富文本字段筛选集合列表
  • 使用富文本字段的条件可见性

创建富文本字段

富文本字段可以添加到新的或现有的集合中。在集合设置中,单击新领域然后选择富文本字段。

“富文本”在“新建字段”选择菜单中突出显示。

在保存字段之前,可以设置最小字符数和/或最大字符数这是允许的。与任何字段一样,您可以添加帮助文本并指定字段是否为要求与否。

创建富文本内容

您和您的协作者可以为每个Collection项创建富文本内容。

  1. 在CMS中打开一个Collection项
  2. 键入或粘贴您的富文本内容
  3. 进一步格式化或添加媒体
  4. 保存收藏项目
在编辑器中编辑名为“教训”的集合页面的预览。

在富文本字段中,你可以添加:

  • 多个段落
  • 图片
  • 视频
  • 富媒体
  • 项目符号列表
  • 编号列表
  • 粗体文本
  • 斜体文本
  • 链接
  • 标题
  • 块报价
推荐阅读
了解关于富内容以及如何添加、格式化和样式富文本元素的更多信息

在设计中显示动态富文本

若要在集合列表或集合页中显示富文本字段的内容,可以添加富文本元素并将其连接到这个字段:

  1. 在集合列表或集合页面中添加富文本元素
  2. 检查得到文本复选框的内部文本设置出现
  3. 控件将其连接到相关的富文本字段字段下拉
显示富文本元素的内部文本设置。选中该复选框以从名为Blog Posts的集合中获取文本,并展开下拉菜单以连接到Featured Blog Post字段。

您还可以通过选择文本元素并单击画布上元素标签旁边的设置图标或转到设置面板(D)来访问内部文本设置。

样式化嵌套在富文本字段中的元素

您可以为嵌套在富文本中的每个元素设置特定的样式,如标题、列表、链接等。您可以在将富文本元素连接到富文本字段之前完成此操作。了解关于在富文本元素中嵌套样式元素的更多信息。

当富文本元素连接到富文本字段时,不能对嵌套在富文本元素中的元素设置样式。首先,您需要删除连接,设置其元素的样式,然后将其再次连接到富文本字段。取消选中“从“得到文本内部文本设置。

使用富文本字段筛选集合列表

使用富文本字段过滤集合列表:

  1. 选择要筛选的集合列表
  2. 设置面板(D)
  3. 添加一个过滤器收藏列表设置
  4. 在第一个下拉列表中选择相关的富文本字段
  5. 在第二个字段中选择一条规则
  6. 如果需要,指定该值
  7. 点击保存

您可以对富文本字段和值使用的筛选规则是:

  • 设置-查找具有此富文本字段内容的集合项
  • 没有设置-查找在这个富文本字段中没有任何内容的集合项
了解有关筛选集合列表的详细信息。

使用富文本字段的条件可见性

可以设置条件格式,以在特定条件下显示丰富的文本内容。你也可以设置条件格式,例如,标题只在特定的富文本字段有内容时显示:

  1. 选择标题
  2. 设置面板(D)
  3. 添加一个条件(当此元素可见时)有条件的可见性
  4. 在第一个下拉列表中选择富文本字段
  5. 选择设置在第二个下拉列表中
  6. 点击保存

了解更多关于条件可见性的信息。

尝试Webflow——它是免费的
Baidu
map