Drupal 中文本编辑器入门

了解如何在 Drupal 中使用 WordPress 中流行的 WYSIWYG 编辑器。
103 位读者喜欢这篇文章。
Text editor on a browser, in blue

自 2017 年以来,WordPress 的 Gutenberg 插件中就有一个非常出色的 WYSIWYG 编辑器。但是 Drupal 社区尚未就内容管理系统 (CMS) 编辑体验的最佳方法达成共识。但是,当在社区的共同努力下,Gutenberg 与 Drupal 集成时,出现了一个强大的新选择。

以前,Drupal 8 中主要有两种内容创建方法

  • 基于段落的方法中,内容由称为段落的实体组装而成。目前,大约有 100,000 个网站使用 Paragraphs 模块(根据 Drupal 的数据)。
  • 布局构建器方法使用 Drupal 8.5 附带的编辑工具。它仍在改进中,但它是下一个强有力的竞争者,因为它与 Drupal 核心集成得非常好。由于布局构建器是 Drupal 的一部分,因此无法获得使用情况统计数据。

在 2018 年底,由 Frontkom(一家专注于开源解决方案的挪威数字机构)领导的 Drupal 社区将 WordPress Gutenberg 项目作为一个贡献模块移植到 Drupal 中。让我们来看看 Gutenberg 在 Drupal 中是如何工作的(包括一些很酷的 Drupal 特定集成)。

安装

安装 Gutenberg 模块 与安装任何 Drupal 模块一样简单,并且它具有良好的安装文档

配置

Gutenberg 已集成到 Drupal 的默认内容实体创建工作流程中。您可以在您选择的任何内容类型上使用它,前提是该内容类型至少有一个文本区域字段,Gutenberg 编辑器的输出将保存在该字段中。

要在 Drupal 中的内容类型上启用 Gutenberg 项目,您必须导航到其设置:结构 > 内容类型,然后从您要使用 Gutenberg 的内容类型旁边的下拉列表中,单击编辑

Drupal settings

在出现的表单中,向下滚动并选择左侧的 Gutenberg 体验选项卡,您可以在其中找到以下描述的设置。选中 启用 Gutenberg 体验 复选框。

Drupal Gutenberg settings

模板

这是 WordPress 开箱即用不具备的酷炫功能之一。它使您能够为 JSON 结构中的新页面定义模板。这将使用虚拟占位符内容预先填充所有新创建的文章,这将帮助编辑正确地构建内容。在上面的屏幕截图中,我添加了一个标题和一个段落。请注意,任何双引号都必须转义。

模板锁定

此设置允许您定义是否允许用户删除占位符内容、添加新块或仅编辑现有的预填充内容。

允许的 Gutenberg 和 Drupal 块

这是 Gutenberg Drupal 端的另一个超酷功能。Drupal 允许用户创建各种类型的块来设计页面。例如,您可以创建一个包含五个最新博客文章、最新评论或用于收集用户电子邮件的表单的块。

Gutenberg 与 Drupal 的深度集成允许用户选择在编辑时哪些 Drupal 块对用户可用(例如,将嵌入限制为 YouTube)并将块用作内联内容。这是一个非常方便的功能,可以对用户体验进行精细控制。

在空白 Drupal 安装中没有太多选择,但实时站点通常有许多提供各种功能的块。在下面的屏幕截图中,选择了 搜索表单 Drupal 块。

Drupal Gutenberg blocks

完成配置后,点击 保存内容类型

使用 Drupal Gutenberg 发布内容

当为内容类型启用 Gutenberg 时,它会接管大部分编辑体验。

Drupal Gutenberg content screen

在主窗口中,您可以看到我在上面的模板配置中添加的虚拟占位符内容。

Drupal 特定选项

在右侧,有一些 Drupal 提供的字段和设置。例如,标题字段是 Drupal 中必需的单独字段,因此它不在主 Gutenberg 屏幕上。

标题 下方,还有其他设置,这些设置可能会因安装的模块和 Drupal 中设置的选项而异。您可以看到 修订日志消息菜单设置评论设置 以及添加 URL 别名 的位置。

通常,Drupal 内容类型由多个文本字段组成,例如标签、类别、复选框、用于摘要的图像字段等。当您为内容类型启用 Gutenberg 时,这些附加字段在 更多设置 选项卡中可用。

您现在可以添加您的内容了——它的工作方式与 WordPress Gutenberg 中的工作方式相同,但增加了添加 Drupal 块的选项。

在下面的屏幕截图中,您可以看到当我添加一些文本来替换占位符文本、来自 Drupal 的搜索块、标题、标签和自定义 URL 别名时会发生什么。

Drupal Gutenberg entering text

点击 保存 后,您的内容将发布。

Drupal Gutenberg output

就是这样。它像魔法一样有效!

共同努力,创造更好的软件体验

Drupal 中的 Gutenberg 运行良好。它是一种替代选项,允许编辑人员控制其网站的外观和感觉,细致到最微小的细节。采用率增长良好,截至撰写本文时,安装量已超过 1,000 次,并且每月新增 50 次。Drupal 集成添加了其他很酷的功能,例如细粒度的权限、占位符内容以及内联包含 Drupal 块的能力,这些功能在 WordPress 插件中不可用。

很高兴看到两个独立项目的社区共同努力,实现为人们提供更好的软件这一共同目标。

接下来阅读什么
标签
User profile image.
我是 Droptica (www.droptica.com) 的 Drupal 爱好者

1 条评论

我刚刚在一个测试站点上安装了 Gutenberg。围绕图像环绕文本的能力比 CKEditor 有了很大的改进 - 真的令人印象深刻。在我在真实内容上尝试之前,我希望能够像在 CKEditor 中那样添加摘要,而不是截断的开头。我发现一篇文章说你可以使用“阅读更多”块并指定摘要不显示在主文章中。“更多”或“阅读更多”块似乎在 Drupal 版本中不可用。
我错过了什么吗?

Creative Commons License本作品根据 Creative Commons Attribution-Share Alike 4.0 International License 获得许可。
© . All rights reserved.