README

一组用于插入短代码的 CKEditor 插件

包含的短代码

按钮
Font Awesome 图标

安装

此模块与配置文件一起安装。

开发

扩展 CKEditor 分为两部分，CKEditor 插件和 Drupal 插件。Drupal 插件将 CKEditor 插件连接到网站。我们正在使用 CKEditor 4，因此制作插件必须遵循 CKEditor 4 API。

CKEditor 插件

CKEditor 插件遵循特定的目录结构。您可以将新插件添加到 plugins 目录。

plugin_name
|_ dialogs         // This is where to define modals for the plugin
|_ css             // Optional styles for this plugin. Styles are applied to the modal dialog only
|_ icons           // Contains the button icon that appears on the editor toolbar
|_ plugin.js       // This defines the plugin

要创建插件，请阅读这个插件示例。您不需要添加 config.extraPlugins 部分，因为 Drupal 会这样做。

图标图像的名称必须与插件名称匹配。
示例
ckeditorfa5 插件包含一个名为 ckeditorfa5.png 的图标。
在调用 editor.ui.addButton() 时，图标选项也命名为 ckeditorfa5，不带文件扩展名。

Drupal 插件

插件将扩展 CKEditorPluginBase 类。您可以在 src/Plugin/CKEditorPlugin 目录中添加新插件。每个文件都必须在类上方有注释，以便 Drupal 找到它。

您可以将现有的插件文件复制以创建自己的。此类中的两个重要方法是 getFile() 和 getButtons()。前者将告诉 Drupal 实际 CKEditor 插件的位置。后者将按钮添加到编辑器工具栏。

类注释中 id 的值必须与 CKEditor 插件名称匹配。
示例
ckeditorfa5 插件使用 CKEDITOR.plugins.add('ckeditorfa5',{}) 定义了一个新的插件
在 IconShortcode.php 注释中，id 的值是 "ckeditorfa5"

在 getButtons() 返回的数组中，关联数组中的键必须与 CKEditor 插件中的按钮名称匹配。
示例
在 IconShortcode.php 中，键名是 ckeditorfa。在 ckedortorfa5/plugin.js 中，调用 editor.ui.addButton() 的第一个参数也称为 ckeditorfa

自定义过滤器

过滤器应用于在渲染到页面之前的内容。您可以在 src/Plugin/Filter 目录中添加新过滤器。

有一个 process() 方法，其中对文本进行转换。确保返回一个新的字符串，而不是传递到函数中的 $text 变量。如果您正在添加类或额外的标记，请确保将其添加到文本编辑器配置页面上的 允许的 HTML 标签 过滤器选项。

样式表

要向文本编辑器本身添加 CSS，请将 CSS 文件添加到 ucb2021_base.info.yml 中的 ckeditor_sylesheets 键。

cu-boulder / ucb_shortcodes

维护者

详细信息

README

包含的短代码

安装

开发

CKEditor 插件

Drupal 插件

自定义过滤器

样式表