回到所有的课程
课程库

富文本元素概述

使用富文本元素(RTE)创建长格式内容。

这个视频的特点是一个旧的UI。更新版本即将到来!

富文本元素(RTE)是创建长篇内容(如博客文章、关于页面、传记等)的完美元素。您可以双击富文本元素来直接创建这些不同的内容元素,而不是添加单独的标题、段落、列表或图像元素。

在Elements > Typography下的Add面板中突出显示的富文本元素。

富文本元素还使客座编辑可以轻松地编辑其中的富内容编辑器

在这节课中,你将学习:

  1. 如何添加富文本元素到您的网站
  2. 如何添加和格式化文本内容
  3. 如何添加媒体内容、自定义代码和列表
  4. 如何样式内容在富文本元素

如何添加富文本元素到您的网站

控件中拖动富文本元素,从而添加富文本元素添加面板(A)致设计人帆布。要添加或编辑其中的内容,双击Rich text元素或选择元素并按键盘上的Enter或Return键。

你可以在富文本元素中添加以下元素:

  • 段落
  • 标题(H1-H6)
  • 图片
  • 图片标题
  • 图像alt属性
  • 自定义代码
  • 块报价
  • 无序列表(项目符号)
  • 有序列表(编号)
  • 视频(Youtube, Vimeo)
  • 富媒体(谷歌地图、SoundCloud、Imgur、Giphy、Codepen等)

你也可以为文本元素添加额外的格式:

  • 链接(URL、页面、电子邮件等)
  • 粗体文本
  • 斜体文本
  • 上标和下标文本

如何添加和格式化文本内容

您可以在RTE中开始输入,然后向文本添加格式,以创建标题、块引号、粗体或斜体文本以及链接。

如何添加段落

就像任何其他文本编辑器一样,按键盘上的Enter键将在新的行上创建一个新的段落,您可以继续键入。若要添加多个段落,请在段落末尾按“Enter”。

如何添加标题和块引号

要创建标题,请选择段落内的任何文本,然后选择标题(H1-H6)选项。

富文本元素中的文本被高亮显示以应用H2标题。

创建块引号也是如此。

如何格式化文本和添加链接

任何文本元素的任何部分(例如,标题,段落,标题等)都可以通过选择文本的一部分并应用所需的格式选项来使用粗体,斜体,上标,下标和链接进行格式化。了解有关内联文本格式的更多信息

富文本元素中的文本被高亮显示,以使文本加粗和斜体。

当您在RTE中创建链接时,您可以选择URL、页面、页面部分、电子邮件或电话号码。

富文本元素中的文本被突出显示,以应用指向同一站点上另一个页面的链接。

键盘快捷键

这些键盘快捷键可以帮助你更快地创建内容:

  • 转变+空间插入一个插入空格(,)
  • 转变+输入插入一个换行符(< br >)
  • 命令+B控制+B在Windows上)生成文本大胆的
  • 命令+控制+在Windows上)选择文本
  • 命令+K控制+K(在Windows上)允许您插入超链接

如何添加媒体内容、自定义代码和列表

当你的文本光标在新行上时,+按钮出现。单击此按钮将显示一个插入菜单,其中包含添加图像、视频、其他富媒体、自定义代码以及项目符号或编号列表的选项。

添加图像、视频和富媒体

RTE中的所有媒体元素都是响应式的,并且将尊重内容的宽高比。YouTube, Vimeo和Dailymotion视频支持已经增强,允许自定义开始时间。下面是一些支持的富媒体类型的列表:

  • YouTube
  • Vimeo
  • Instagram发布
  • Facebook帖子
  • DailyMotion网站
  • Kickstarter
  • 泰德
  • Wistia
  • 转播画面
  • 抽搐
  • Hulu
  • Imgur专辑
  • 谷歌地图
  • JSFiddle
  • Codepen
  • Scribd
  • SlideShare
  • Spotify的播放列表和图表
  • Giphy
  • 一夜
  • 和更多!

媒体设置

每个媒体元素的大小可以使用图像设置中的预设值,也可以通过单击“扳手的图标。一个可选的标题也可以在下面添加图片。

富文本元素中森林中金色树木的图像。打开图像设置,显示图像已设置为全宽度。

Alt文本

若要在图像中添加所有文本,请选择要添加的图像alt文本请按“扳手图标,然后输入Alt文本。了解更多关于编写描述性alt文本的信息

如何添加自定义代码

插入菜单包含一个添加自定义代码的按钮。

“自定义代码”按钮在富文本元素的插入菜单中突出显示。

你可以使用自定义代码用HTML创建表格和分隔符,用有针对性的CSS样式你的富文本内容的部分,用JavaScript扩展你的网站的功能(如自定义谷歌地图或谷歌AdSense广告),并与互动第三方内容(如嵌入从Twitter, Soundcloud, Airtable等)吸引你的观众。

方法如下:

  1. 将光标放在想要添加自定义代码的位置
  2. 点击“+图标打开插入菜单,然后单击自定义代码按钮
  3. 添加代码

如何添加列表

插入菜单包括添加无序(项目符号)和有序(编号)列表的选项。

项目符号和编号列表按钮在富文本元素的插入菜单中突出显示。

您可以从“插入”菜单中添加项目符号列表,也可以输入一个破折号(-)后跟一个空格。

要创建编号列表,您可以使用“插入”菜单,或者键入后跟句号和空格的整数(例如,1.3.10.)。当您希望在列表项之间添加一些媒体后继续编号列表时,这尤其有用—您可以在序列中键入下一个数字,后跟一个句号和一个空格。

来自其他来源的富文本内容

你可以从其他网站或者像谷歌Docs这样的文字处理软件粘贴富文本内容。所有格式和链接都将粘贴到富文本元素中。当将图像粘贴到设计器中的富文本元素或Collection管理器中CMS项目的富文本字段中时,图像也将在粘贴时导入详细信息视图(在设计器和编辑器中)。

重要的是:图像不会从编辑器中粘贴在富文本元素中的富内容中导入。

重要的是要记住,粘贴来自其他源的富文本内容也可能带来不需要的格式,如背景颜色或隐藏字符—因此,在粘贴来自其他源的富文本时可能需要注意。

要确保没有不需要的格式被粘贴,您可以首先将富文本内容粘贴到纯文本编辑器中,然后复制并粘贴到富文本元素中,或者使用键盘快捷键粘贴未格式化的文本(命令+转变+V在Mac上,或者控制+转变+V在Windows上)。请记住,此键盘快捷键将删除的文本所有格式包括粗体、斜体和超链接。

如何样式内容在富文本元素

对富文本元素中的元素进行样式化与对其他独立元素进行样式化不同,因为富文本元素中的文本和媒体元素可以由客座编辑随时创建或删除。

基本样式

RTE元素从它们各自的HTML标记。在RTE中对元素进行样式化的最简单方法是选择嵌套元素并对其标记进行样式化。

如果RTE处于激活状态——也就是说,你正在RTE中输入或添加内容——你将无法选择其中的单个元素。要停用RTE,请按Escape键。然后,您将能够选择嵌套在RTE中的元素来对它们进行样式化。

设置嵌套在RTE中的元素的样式:

  1. 选择RTE中的元素
  2. 点击进入选择字段风格的面板或按命令+输入控制+输入在Windows上)
  3. 选择标签(例如,所有的段落)从菜单上
  4. 设置标签样式

这样,您就可以在整个站点上编辑该元素的默认样式。如果你不想给网站上的所有元素都设置样式,请查看先进的样式在下面。了解更多关于HTML标签样式的知识

重要的是:删除任何嵌套在富文本元素中的元素都会删除整个富文本元素。要删除任何RTE内容,请通过单击元素内部来激活RTE,然后选择并删除内容。

先进的样式

添加一个到富文本元素将允许您为该RTE实例创建唯一的文本样式。对这些嵌套标记进行样式化将确保只有应用了相同类的RTE中的元素才会受到影响。遵循以下步骤:

  1. 选择RTE并给它一个类
  2. 选择RTE内部的任何元素
  3. 风格的面板(年代)
  4. 点击进入选择字段
  5. 从菜单中选择标签(例如,All paragraph)
  6. 点击“类名”内的巢选择器
  7. 为元素设置样式

如何设置动态富文本的样式

富文本元素可以连接到集合中的富文本字段。连接RTE后,就不可能再选择或编辑文本元素了,除了在CMS中,CMS是RTE中内容的源。

要为已连接的RTE设置样式,建议将其从富文本字段断开(取消绑定),为嵌套元素设置样式,然后重新连接(绑定)它。如果您只是想在已连接的RTE上应用一个类,您可以在不断开连接的情况下这样做。了解有关动态富文本的更多信息

专家提示:类中创建富文本元素风格指南页面在RTE中设置元素的样式,而不需要在每次进行设计更改时将其与CMS连接或断开连接。为此,在样式指南中的RTE上设置与在Collection页面中设置的相同的类。现在,无论何时需要更新Collection页面上的富文本元素中的元素的样式,都可以转到样式指南页面,并在相应的RTE中为这些元素设置样式。


尝试Webflow-免费的
Baidu
map