如何将类添加到 CKEditor 图像

如果你正在使用 CKEditor，并且想要添加一个自定义的类到图像，可以按照以下步骤进行操作。

1. 打开 config.js 文件

在 CKEditor 的根目录下，找到 config.js 文件。

2. 添加自定义的类名

在 config.js 文件中，添加以下代码：

CKEDITOR.on('dialogDefinition', function(ev) {
  // Take the dialog name and its definition from the event data.
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  // Check if the dialog is the image dialog.
  if (dialogName === 'image') {
    // Get a reference to the image info tab.
    var infoTab = dialogDefinition.getContents('info');

    // Get a reference to the class name field.
    var classNameField = infoTab.get('txtClass');

    // Append a new option to the class name field.
    classNameField.items.push(['MyCustomClassName', 'my-custom-class-name']);
  }
});

此代码段将会在图像对话框的“基本资讯”选项卡中添加名为 “MyCustomClassName” 的自定义类。

3. 生效

保存 config.js 文件并重新加载 CKEditor 发布的 HTML 页面。在图像对话框中选择 “基本资讯” 选项卡，你将会看到自定义的类名已经被添加。

以上就是将类添加到 CKEditor 图像的步骤，希望对你有所帮助！

# 如何将类添加到 CKEditor 图像

如果你正在使用 CKEditor，并且想要添加一个自定义的类到图像，可以按照以下步骤进行操作。

1. 打开 `config.js` 文件

在 CKEditor 的根目录下，找到 `config.js` 文件。

2. 添加自定义的类名

在 `config.js` 文件中，添加以下代码：

```javascript
CKEDITOR.on('dialogDefinition', function(ev) {
  // Take the dialog name and its definition from the event data.
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  // Check if the dialog is the image dialog.
  if (dialogName === 'image') {
    // Get a reference to the image info tab.
    var infoTab = dialogDefinition.getContents('info');

    // Get a reference to the class name field.
    var classNameField = infoTab.get('txtClass');

    // Append a new option to the class name field.
    classNameField.items.push(['MyCustomClassName', 'my-custom-class-name']);
  }
});

此代码段将会在图像对话框的“基本资讯”选项卡中添加名为 “MyCustomClassName” 的自定义类。

3. 生效

保存 config.js 文件并重新加载 CKEditor 发布的 HTML 页面。在图像对话框中选择 “基本资讯” 选项卡，你将会看到自定义的类名已经被添加。

以上就是将类添加到 CKEditor 图像的步骤，希望对你有所帮助！