让你的 Drupal 9 CKEditor 流行起来——7 个你不知道的有用模块

已发表: 2021-12-06

内容编辑器基本上是 CMS 最关键的功能。有了像 CKEditor 这样的强大工具作为其默认的富文本编辑工具，Drupal 大大提升了其内容管理游戏，为 Drupal 8/9 提供了一些新功能，如 CKEditor 小部件系统和高级内容过滤器 (ACF)。所以，是的，即使使用默认功能，它也非常强大……但是您可以在一些贡献的模块和插件的帮助下真正提升您的 CKEditor 游戏。继续阅读以了解我们对最佳和最有趣的附加组件的看法，以扩展 CKEditor 的功能和可用性。

Drupal 9 CKEditor

首先，对于 Drupal 的新手，CKEditor 4.5 是 Drupal 8/9 中默认的 WYSIWYG（所见即所得）丰富的编辑器。它是一个文本编辑器，可帮助网站管理员直接在网页中编写和编辑内容。与 Drupal 一样，CKEditor 是一个开源项目，最近升级了许多强大的新功能，这些功能将继续改进。作为 Drupal 10 准备计划的一部分，Drupal 贡献者正在努力在 Drupal 10 中实现最新和最现代的版本 - CKEditor 5。

现在我们已经了解了基础知识，让我们开始升级吧！

使用这些出色的 Drupal 9 模块扩展 CKEditor

1. CKEditor 阅读更多

你知道那些时候你想让读者选择查看大量文本的其余部分吗？这是您使用 CKEditor 阅读更多功能的提示，它邀请您的用户“继续阅读”，同时仍然为您的页面提供紧凑的布局。为了添加它，Drupal 9 提供了一种简单易行的方法来在您安装贡献者模块后启用 Read More / Show Less 功能。

模块实现：

安装此模块后，您需要配置一些设置：

编辑首选文本格式并启用“限制允许的 HTML 标签”。
在“允许的 HTML 标签”中添加<div data-readmore-less-text data-readmore-more-text data-readmore-type class="ckeditor-readmore"> 。禁用“限制允许的 HTML 标签”并点击保存。
现在将“阅读更多”图标从可用按钮拖放到活动工具栏（如上图所示）并点击保存。
清除缓存后，当您选择“首选文本格式”时，您会在文本编辑器中找到“阅读更多”图标。

如何使用它：

在内容区域内，单击“文本格式”图标。现在你会得到一个矩形框。添加您要在用户单击“阅读更多”后显示的其余内容。

常见问题：我可以修改阅读更多文本吗？

绝对地！只需单击“CKEditor 插件设置”中的“阅读更多按钮”选项卡并更改文本。

2. CKEditor 颜色按钮

默认情况下，CKEditor 不提供在编辑器中更改文本颜色的选项。但是，如果您确实想更改特定文本的颜色，甚至用不同颜色突出显示文本，则 Drupal 9 CKEditor 颜色按钮模块应该在您的列表中。请注意，此模块还需要安装面板按钮模块，并且这两个模块都需要安装库、颜色按钮库和面板按钮库。在主题的库文件夹中安装模块并添加库后，我们可以将颜色按钮从可用按钮移动到首选文本格式的活动工具栏。

常见问题解答：我可以添加自定义颜色吗？

是的！如果您不想使用任何已经可用的默认颜色，您也可以设置自定义颜色。您可以在激活颜色选项的“文本编辑器格式”部分中执行此操作。在“文本编辑器格式”的“CKEditor 插件设置”部分找到“CKEditor 颜色按钮”，在“文本颜色”文本区添加颜色，逗号分隔且不带# 号。

3. CKEditor Youtube

Drupal 9 CKEditor Youtube 模块可帮助您将 Youtube 视频添加到您的内容中，而无需长嵌入代码。安装 Youtube 图标并将其从可用按钮移动到活动工具栏后，您可以在文本编辑器中以首选文本格式找到 Youtube 图标。该模块依赖于库。

这个模块最好的地方之一是灵活性。如上图所示，您可以在指定宽度和高度的同时“粘贴嵌入代码”或粘贴 Youtube URL。此外，您还有一些方便的选项，例如“自动播放”、“在（特定时间）开始”和“显示播放器控件”。

4. CKEditor 模板和CKEditor 模板用户界面

您的网站页面或帖子有很多相同的内容结构吗？ CKEditor 模板和 CKEditor 模板用户界面模块是您轻松复制的门票。这两个模块都依赖于可以按照模块页面中的说明下载和安装的库。安装这些库后，您可以将模板图标从可用按钮移动到活动工具栏，如下图所示。

CKEditor 模板模块提供了一个带有预定义模板的对话框弹出窗口。当您单击模板图标（如上面的屏幕截图所示）时，您将看到一个弹出窗口，您可以选择任何预定义的模板。然后将使用包含的“文本格式和样式”插入模板。

CKEditor 模板用户界面模块用于创建您在CKEditor 模板模块中选择的模板。启用该模块后，您将在Config > Content Authoring > CKEditor Templates部分找到一个选项。

当您从配置中单击CKEditor 模板时，您将被重定向到CKEditor 配置模板页面。现在您可以添加或编辑模板。

5. CKEditor CodeSnippet

使用 CKEditor CodeSnippet 模块，您可以在内容中添加您的“代码内容”，使其突出显示并格式化。该模块使用highlight-js库和它的所有可用样式。使用 composer 安装此模块将自动安装库。安装此模块后，您可以将“代码片段”图标从可用按钮移动到活动工具栏。

现在您将在文本格式的CKEditor 插件设置中找到Code Snippet选项卡。您可以在此处选中/取消选中支持的编程语言。

常见问题：如何使用？

安装该模块后，您可以在来自 CKEditor 的内容中插入 CodeSnippet 功能。当您单击代码片段图标时，您将看到一个弹出窗口。在这里，您可以粘贴代码并选择代码语言。

6. CKEditor 字数统计

因此，您正在处理字/字符限制……这是具有动态布局的高度风格化站点中的常见情况。如果多人同时处理相同的内容，这些可能会变得特别混乱。在这些情况下，在编辑器本身的页脚中查看 CKEditor 中的字符和单词数会很有帮助（就像在 MS Word 中一样）。那时您将安装 CKEditor Wordcount 模块。安装模块和库后，可以在文本格式的CKEditor插件设置中找到“字数和字符数”。在这里，您可以根据自己的要求选中/取消选中功能。您还将在 CKEditor 的右下角找到一个计数器。

7. CKEditor 推文文本

试图获得一些互联网积分？使用 CKEditor Tweetable Text 模块，您可以为您的用户提供选项，通过单击单词或语法来发布特定文本片段。只需按照模块页面中的说明安装模块和库，并将可推文的文本图标从可用按钮移动到活动工具栏。然后，您将在文本编辑器中找到一个推文图标。当您单击此图标时，将打开一个弹出窗口。在这里，您可以添加显示文本（要为其添加推文图标的单词）和推文表文本（将出现在推文中的文本）。当用户单击“显示文本”时，它将重定向到 Twitter 并显示Tweetable 文本。