帮助
登录

使用富文本编辑器处理内容

您可以使用 Shopify 的富文本编辑器来设置在线商店中所显示内容的格式和样式。

在此页面上

在何处使用富文本编辑器

您可以在商店的多个位置使用富文本编辑器添加或编辑文本：

如果您使用的是兼容的模板，则可以使用模板编辑器将富文本分区添加到您的页面或模板中。

使用富文本编辑器添加 HTML 内容

您可以使用富文本编辑器为博客文章、页面、产品描述和产品系列描述输入 HTML 内容。

点击 Edit code 按钮以查看富文本编辑器中内容的 HTML 代码。

在 HTML 视图中，您可以对富文本编辑器中的内容进行多项更改。您可以使用 HTML 添加图片、视频或表格，还可以调试或微调布局和内容样式。

嵌入媒体文件小组件

如果要嵌入视频或音乐小组件，则需要先将其托管在 Youtube、Vimeo 或 SoundCloud 等服务上。这些服务会生成嵌入代码，您可以将该代码复制并粘贴到 Shopify 后台富文本编辑器中。

步骤：

  1. 查找要嵌入的媒体文件的嵌入代码。
  2. 点击嵌入代码并按 PC 上的 ctrl + A 或 Mac 上的 command + A 来选择整个嵌入代码。
  3. 按 PC 上的 ctrl + C 或 Mac 上的 command + C 复制嵌入代码。
  4. 在 Shopify 后台中，针对您正在编辑的内容，点击富文本编辑器上的显示 HTML 按钮。
  5. 按 PC 上的 ctrl + V 或 Mac 上的 command + V 粘贴嵌入代码。
  6. 点击保存。

使用富文本编辑器设置文本格式

使用格式按钮，您可以快速创建段落、标题或块引用。使用正确的格式和标题级别有助于用户和搜索引擎阅读您网站的内容。

若要为文本选择格式，请突出显示文本，然后点击格式按钮。

格式选项

  • 段落

    网站的大部分文本内容都是段落文本。段落文本的字体大小通常为 10–12 pt，但有些模板会使用不同的字体大小。

  • 标题 (1-6)

    标题用于组织内容结构。标题分为 6 个级别。标题 1 是最重要的级别，标题 6 是最不重要的级别。

  • 块引用

    块引用用于显示引自他人的文本，例如引言或者书籍或网站的摘录。

加粗文本

若要将文本设置为粗体，请突出显示文本，然后点击加粗按钮。

将文本设置为斜体

若要将文本设置为斜体，请突出显示文本，然后点击斜体按钮。

为文本添加下划线

若要为文本添加下划线，请突出显示文本，然后点击下划线按钮。

创建项目符号列表

若要创建项目符号列表，请点击项目符号列表按钮。

您可以键入内容以创建第一个项目符号列表项。若要创建新的列表项，请按 enter 或 return 键。若要完成列表，请按两次 enter 或 return 键。

创建编号列表

若要创建编号列表，请点击编号列表按钮。

您可以键入内容以创建第一个编号列表项。若要创建新的列表项，请按 enter 或 return 键。若要完成列表，请按两次 enter 或 return 键。

缩进文本

缩进段落可为其左侧添加边距。若要缩进段落，请点击缩进按钮。

取消缩进文本

取消缩进段落可删除其具有的任何缩进边距。若要取消段落缩进或“减少缩进”，请点击减少缩进按钮。

对齐文本

若要对齐文本，请选择文本，点击对齐按钮，然后选择左对齐、居中对齐或右对齐。

更改文本颜色

  1. 突出显示文本并点击颜色按钮。
  2. 点击一种颜色或输入十六进制代码，以将突出显示的文本更改为该颜色。

更改文本背景颜色

  1. 突出显示文本并点击颜色按钮。
  2. 点击背景标签页。
  3. 点击一种颜色或输入十六进制代码，以将突出显示的文本背景更改为该颜色。

在富文本编辑器中清除格式

若要删除文本或图片的格式，请突出显示内容，然后点击清除格式按钮。

使用富文本编辑器插入表格

您可以使用富文本编辑器在博客文章、页面、产品描述和产品系列描述中插入表格。创建表格后，您可以在其中放置文本、图片甚至视频。

步骤：

  1. 在富文本编辑器中，点击插入表格按钮。
  2. 点击插入表格以插入表格。此操作将创建一个包含一行和一列的表格。

创建表格后，再次点击插入表格按钮以修改表格的行和列：

  • 在上方插入行：将光标置于某一行中，然后点击此按钮以在上方插入新行。
  • 在下方插入行：将光标置于某一行中，然后点击此按钮以在下方插入新行。
  • 在左侧插入列：将光标置于某一列中，然后点击此按钮以在该列左侧插入新列。
  • 在右侧插入列：将光标置于某一列中，然后点击此按钮以在该列右侧插入新列。
  • 删除行：将光标置于要删除的行中，然后点击此按钮。
  • 删除列：将光标置于要删除的列中，然后点击此按钮。
  • 删除表格：将光标置于表格中的任意位置，然后点击此按钮以删除整个表格。

使用富文本编辑器插入链接

您可以使用富文本编辑器在博客文章、页面、产品描述和产品系列描述中插入链接（超链接）。您可以添加将客户引导至您的 Shopify 在线商店中的页面以及其他网站的链接。您还可以添加用于打开电子邮件消息或拨打电话的链接，以帮助客户与您联系。

步骤：

  1. 突出显示要转换为链接的文本或图片。
  2. 点击插入链接。
  3. 在“ 链接到 ”字段中输入链接的目的地 URL：
    • 若要链接到您的 Shopify 商店外部的网站，请输入 https://，后跟网址，例如 https://www.example.com。
    • 若要链接到您的 Shopify 在线商店中的页面，请输入短 URL，例如 /collections/summer-collection。
    • 若要创建用于打开电子邮件消息的链接，请输入 mailto:，后跟电子邮件地址，例如 mailto:example@example.com。
    • 若要创建用于拨打电话的链接，请输入 tel:，后跟电话号码，例如 tel:+0-123-456-7890。
  4. 在链接标题框中输入链接的简短描述。
  5. 使用“ 在此处打开此链接 ”菜单选择链接的打开方式：
    • 同一窗口：链接将在用户的现有浏览器标签页或窗口中打开。
    • 新窗口：链接将在新的浏览器标签页或窗口中打开。
  6. 点击插入链接可将突出显示的文本转换为链接。

使用富文本编辑器添加内部和外部链接

指向您 Shopify 商店中页面的链接称为内部链接。您可以使用短 URL 创建内部链接。例如，URL /collections 将指向您商店的产品系列页面。

若要链接到您在线商店的特定页面（例如产品系列或产品页面），请使用 URL 格式 /page-type/page-handle。例如，若要链接到您创建的名为“Summer Collection”的产品系列，请使用 URL /collections/summer-collection。

指向 Shopify 商店外部网站的链接称为外部链接。外部链接需要完整输入，并以 http:// 开头。

在您上传文件后，您可以将其链接到富文本编辑器中的内容，以便从产品或产品系列描述、网页或博客文章中下载该文件。

步骤：

台式电脑

  1. 在您的 Shopify 后台中，转至内容 > 文件。

  2. 复制您想链接的文件的 URL。

  3. 在您的 Shopify 后台中，点击要添加该文件链接的产品、产品系列、网页或博客文章。

  4. 在富文本编辑器中，输入或选择链接文本。

  5. 选择链接文本。

  6. 点击插入链接

  7. 在链接到字段中，粘贴您要链接的文件的 URL。

  8. 点击插入链接。在富文本编辑器中，链接文本将以蓝色显示并带有下划线。

移动设备

  1. 在 Shopify app 中，轻触 Menu 图标。

  2. 在内容菜单中，轻触 向下箭头 图标，然后轻触文件。

  3. 复制您想链接的文件的 URL。

  4. 在您的 Shopify 后台中，轻触要添加该文件链接的产品、产品系列、网页或博客文章。

  5. 在富文本编辑器中，输入或选择链接文本。

  6. 选择链接文本。

  7. 轻触插入链接

  8. 在链接到字段中，粘贴您要链接的文件的 URL。

  9. 轻触插入链接。在富文本编辑器中，链接文本将以蓝色显示并带有下划线。

使用富文本编辑器插入图片

您可以通过以下三种方式使用富文本编辑器插入图片：

上传图片

步骤：

  1. 在富文本编辑器中，点击插入图片按钮。

  2. 在插入图片对话框中，点击已上传图片选项卡。

  3. 点击上传文件。

  4. 从您的计算机中选择 WebP、HEIC、SVG、GIF、JPEG 或 PNG 格式的图片文件。

  5. 点击您上传的图片以将其选中。

  6. 从尺寸菜单中，选择图片的显示尺寸。您可以选择原始尺寸来插入图片，而不更改其显示尺寸。

  7. 点击插入图片，将图片放入富文本编辑器中。

从产品图片中选择

步骤：

  1. 在富文本编辑器中，点击插入图片按钮。

  2. 在插入图片对话框中，点击产品图片选项卡。

  3. 点击要插入的图片。如果您找不到要插入的产品媒体文件，则可以使用箭头按钮浏览不同页面。

  4. 从尺寸菜单中，选择图片的显示尺寸。您可以选择原始尺寸来插入图片，而不更改其显示尺寸。

  1. 点击插入图片可将产品图片放入富文本编辑器中。

使用图片 URL

若要使用公共 URL 插入图片：

  1. 在富文本编辑器中，点击插入图片按钮。
  2. 在插入图片对话框中，点击 URL 选项卡。
  3. 输入图片文件的可公开访问 URL。
  4. 点击插入图片，以其原始尺寸将图片插入富文本编辑器中。

在富文本编辑器中移动和调整图片大小

在将图片添加到产品或产品系列描述、网页或博客后，您可以将其移动到内容中的其他位置。

步骤：

  1. 在您的 Shopify 后台中，点击包含要移动或调整大小的图片的产品、产品系列、网页或博客文章。
  2. 在富文本编辑器中，点击该图片。
  3. 执行以下任一操作：
    • 若要移动图片，请在内容字段中将其点击并拖动到其他位置。
    • 若要调整图片大小，请点击并拖动其中一个角。
  4. 点击保存。

在富文本编辑器中编辑图片

您可以在富文本编辑器中更改图片的尺寸、文本环绕和对齐方式。您还可以编辑图片 URL，或者添加或编辑图片替代文本。

步骤：

  1. 在富文本编辑器中双击图片以打开编辑图片对话框。
  2. 使用尺寸和对齐选项编辑图片：
    • 若要更改图片的尺寸，请选择一个尺寸选项。
    • 若要改善您在线商店的 SEO 和辅助功能，请添加或编辑图片替代文本。
    • 若要添加间距，请输入您希望在每侧添加的间距像素数。
    • 若要更改图片的对齐方式，请选择代表左对齐、居中对齐或右对齐的图标。
    • 若要添加文本环绕，请选中 Wrap text around image。
  3. 点击 Edit image 以保存您的更改。

使用富文本编辑器插入视频

您可以使用富文本编辑器在博客文章、页面、产品描述和产品系列描述中插入或嵌入视频。

如果您想嵌入您自己创建的视频，则需要先将其上传到 YouTube 或 Vimeo 等视频流媒体网站。

YouTube 不允许您停用相关视频，但您可以指定相关视频应与刚播放的视频来自同一个频道。

步骤：

  1. 在 PC 上按 ctrl + C 或在 Mac 上按 command + C 来复制视频的 URL。
  1. 访问 Embed Responsively。Embed Responsively 是一款可为您的视频提供改进的嵌入代码的工具。
  1. 在 Embed Responsively上，点击以选择您的视频所在的视频网站。
  2. 在 PC 上按 ctrl + V 或在 Mac 上按 command + V，将您复制的视频 URL 粘贴到 Embed Responsively 上的页面 URL 框中。
  3. 点击嵌入。Embed Responsively 将为您创建嵌入代码。
  4. 如果视频来自 YouTube，并且您只想显示来自同一 YouTube 频道的相关视频，请在嵌入代码中找到该视频的 URL。将 ?rel=0 复制并粘贴到引号内的末尾。
  5. 复制嵌入代码框中的所有代码。
  6. 在 Shopify 后台中，点击富文本编辑器里的插入视频按钮。
  7. 将嵌入代码粘贴到插入视频对话框的框中。
  8. 点击插入视频。
  9. 完成后，点击保存以保存您对所编辑项目的更改。

使用富文本编辑器插入音频文件

您可以使用富文本编辑器在博客文章、页面、产品描述和产品系列描述中插入或嵌入音频文件。

步骤：

  1. 在您的 Shopify 后台中，转至内容 > 文件。

  2. 点击上传文件以上传您想在商店中插入或嵌入的音频文件。

  3. 在在线商店部分，为您要展示音频文件的页面或博客文章打开富文本编辑器。

  4. 复制 <div id="player"><audio controls="controls">，然后将代码粘贴到富文本编辑器中，以在页面上嵌入音频播放器。

  5. 复制以下代码：

  • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  1. 将此代码粘贴到富文本编辑器中音频播放器代码的后面，然后将 https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 替换为您在将音频文件上传到 Shopify 时为其创建的 URL。您可以随时在文件页面上找到您的音频文件的 URL。
  2. 点击保存。
  3. 点击查看以确保您的音频文件可正确播放。

在富文本编辑器中添加或删除内部备注

您可以使用备注标签 <!-- 和 --> 来标记不想在商店中发布的内部文本。

步骤：

  1. 在富文本编辑器中，点击显示 HTML 按钮。
  2. 若要添加内部备注，请将您想隐藏的文本括在 <!-- 和 --> 中。例如：<!--yourtext-->。
  3. 点击保存。

括在备注标签中的 HTML 标签会另存为内部文本。为使这些 HTML 标签正常工作，您需要删除它们两边的备注标签 <!-- 和 -->。

了解富文本编辑器

富文本编辑器集成了 TinyMCE，这是一个第三方内容分发网络 (CDN)。此集成会带来一些重要影响：

  • 内容限制：输入到富文本编辑器的内容有 64 KB 的硬性限制。这适用于页面、博客文章和附加脚本。
  • HTML 清理：TinyMCE 提供内容筛选逻辑，可自动更正 HTML 格式以防止在线店面出现故障和安全风险。虽然您可以手动将 HTML 编辑回其原始形式，但建议您使用这些自动更改以防止出现潜在问题。

富文本编辑器故障排除

如果您在使用富文本编辑器时遇到问题，请查看以下故障排除步骤和常见问题。

格式问题故障排除

复制内容的格式问题

文本始终会继承其原始编辑器或网页的格式。如果您在 Microsoft Word 中编写内容，然后将其复制并粘贴到富文本编辑器中，它将保留相同的颜色、大小、缩进和间距，包括 <div> 标签。

请尽可能直接在富文本编辑器中编辑和设置内容格式。

对于更复杂的页面布局，请考虑使用页面生成器应用，例如 Shogun Drag & Drop Page Builder。

识别格式问题

富文本编辑器中最常见的问题原因是，从其他来源复制和粘贴内容时，嵌入的样式或格式也随之转移。

此问题可能以不同方式出现，但当 Shopify 后台中的显示内容与已上线的商店中的显示内容之间存在任何差异时，通常就是此问题所致。这包括信息未更新或样式显示不同。

格式问题故障排除

有两种方法可以测试是否是格式问题导致了该问题：使用清除格式按钮，或通过 HTML 清除工具运行富文本编辑器内容。

若要进行测试，请为出现问题的产品或页面创建一个副本，然后对该副本执行以下任一测试。

测试 1：清除格式

  1. 选中富文本编辑器中的所有内容。
  2. 点击清除格式按钮。
  3. 点击保存并测试。

测试 2：HTML 清除工具

  1. 复制富文本编辑器中的所有内容。
  2. 将其粘贴到 HTML 清除工具（例如 striphtml.com）中。
  3. 复制所有已清除格式的内容。
  4. 将其粘贴回富文本编辑器中，替换原始内容。
  5. 点击保存并测试。

如果任一步骤解决了问题，则问题源于最初将内容添加到富文本编辑器时转移过来的格式。您可以使用相同的方法修复原始内容。

排查图片代码未对齐问题

如果您在使用环绕选项时无法让文本在图片旁边正确对齐，那么您可能需要移动代码，以便图片标签显示在段落的开头，而不是中间。

  1. 在富文本编辑器中点击“编辑代码”按钮。
  2. 找到图片代码，并将整个 <img> 标签移至段落顶部，即 <p> 段落标签的外部。
  3. 删除图片下方后续段落中的所有 <span> 标签。
  4. 点击保存。

图片代码未对齐的示例：

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

更正后的代码：

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>
排查 mailto 链接无法正常工作的问题

如果 mailto: 链接无法正常工作（加载空白页面或无法打开邮件），请检查该链接是否遵循以下结构：

mailto:email@example.com

如果链接符合上述格式但仍无法按预期工作，则问题可能出在浏览器或电子邮件客户端的设置上。请检查您的浏览器和电子邮件客户端的设置，确保其已正确配置以处理 mailto: 链接。

排查页面图片在调整大小后恢复为原始大小的问题

将图片插入页面时，生成的 HTML 会同时包含 src 参数和 data-mce-src 参数。如果这两个参数不匹配，src 最终会更新以匹配 data-mce-src。

但是，当您使用富文本编辑器调整图片大小时，只有 src 会更新，而 data-mce-src 仍为原始尺寸的 URL。再点击几下后，src 会还原为 data-mce-src URL。

为避免此问题，请手动更新 data-mce-src URL 以匹配您所需的图片大小：

  1. 在富文本编辑器中点击“编辑代码”按钮。
  2. 找到您调整了大小的图片标签。
  3. 找到 src 和 data-mce-src 这两个参数。
  4. 更新 data-mce-src URL 以匹配 src URL。
  5. 点击保存。
排查 HTML 自动更改（清理）问题

您可能会注意到，在富文本编辑器中进行更改时，相应的 HTML 会自动更改。

为什么会发生这种情况？

Shopify 的富文本编辑器集成了 TinyMCE，这是一个第三方内容分发网络 (CDN)。该 CDN 提供了一套广泛而可靠的内容筛选逻辑，可自动更正可能导致在线店面功能异常或使其面临安全风险的 HTML 代码行的格式。此过程称为 HTML 清理。

我该怎么办？

虽然您可以通过手动将 HTML 编辑回原来的状态来绕过内容筛选逻辑，但建议您遵循自动更改。这些自动修正是预期行为，其重要作用是防止对您的在线店面进行可能导致问题的更改。

如果您想通过编写 CDN 试图更正的 HTML 来实现特定目标，请考虑是否有更理想的方法来实现这些目标，例如更改模板代码以支持预期的 HTML 格式。

排查将客户引导至其所选市场之外的链接问题

如果您将 Shopify Markets 与子文件夹和 Geolocation 应用结合使用，那么产品描述、博客文章、页面和产品系列描述中的链接可能会将客户重定向到您的主域名，而不是将他们留在其所选的区域。

为什么会发生这种情况？

富文本编辑器同时支持直接链接（完整 URL）和内部链接（简短 URL）。如果您使用包含完整 URL（例如 https://yourstore.com/collections/summer）的直接链接，客户将被引导至该特定 URL，而忽略他们所选的市场。

如何解决此问题

为确保您的链接可识别区域并将客户留在其所选市场，请使用以 / 开头的内部链接，而不是完整的 URL。

  • 直接链接（不可识别区域）：https://yourstore.com/collections/summer
  • 内部链接（可识别区域）：/collections/summer

要更新现有链接，请执行以下操作：

  1. 在 Shopify 后台中，导航到您要更新链接的产品、产品系列、页面或博客文章。
  2. 在富文本编辑器中，点击编辑代码按钮以查看 HTML。
  3. 找到以 https:// 开头并包含您商店域名的所有链接。
  4. 将完整 URL 替换为简短 URL 格式。例如，将 https://yourstore.com/pages/about 更改为 /pages/about。
  5. 点击保存。

如果您有许多产品、产品系列、博客或页面需要更新，则可以将其导出为 CSV 文件，搜索您的域名或 http 以识别直接链接，将其更新为内部链接，然后将更新后的 CSV 文件重新导入您的商店。