CKeditor富文本编辑器使用技巧之添加自定义插件的方法

CKEditor是一款常用的富文本编辑器，除了自带的插件外，也支持添加自定义插件，进一步增强其功能。下面将详细讲解如何使用CKEditor添加自定义插件。

准备工作

在添加自定义插件之前，需要先下载和安装CKEditor。推荐使用官方网站提供的在线自定义打包工具，可以选择需要的插件和语言包，生成符合自己需求的CKEditor的压缩文件。

添加自定义插件

1. 下载自定义插件
   首先需要下载或创建一个自定义插件，通常包括一个js文件和一个css文件。可以从CKEditor官方网站或者Github上获取现成的自定义插件，也可以自己编写JS/CSS代码创建一个自定义插件。

2. 复制自定义插件到CKEditor文件夹
   将下载或创建好的自定义插件文件夹复制到CKEditor文件夹内的“plugins”目录下。

3. 修改config.js文件
   在CKEditor的安装目录下找到“config.js”文件，添加下列代码：

config.extraPlugins = 'your_custom_plugin_name';

其中，“your_custom_plugin_name”是你自定义插件的名称，多个插件之间使用逗号隔开。

1. 编辑器中使用自定义插件

在CKEditor的编辑器中就可以使用自定义插件了，具体使用方法可以参考该插件的说明文档。

示例说明

以下是两个添加自定义插件的示例说明：

示例一：添加一个自定义字数统计插件

1. 下载自定义插件
   可以从Github上找到“ckeditor-word-count-plugin”插件，下载地址为：https://github.com/w8tcha/ckeditor-word-count-plugin。该插件提供了对编辑器中内容字数的统计。

2. 复制自定义插件到CKEditor文件夹
   将ckeditor-word-count-plugin文件夹内的“plugin.js”和“plugin.css”文件复制到CKEditor文件夹内的“plugins”目录下。

3. 修改config.js文件
   在CKEditor的安装目录下找到“config.js”文件，添加下列代码：

config.extraPlugins = 'wordcount';
config.wordcount = {
    // Whether or not you want to show the Word Count
    showWordCount: true,

    // Whether or not you want to show the Char Count
    showCharCount: true,

    // Whether or not you want to count Spaces as Chars
    countSpacesAsChars: true,

    // Whether or not to include Html chars in the Char Count
    countHTML: false,

    // Maximum allowed Word Count, -1 is default for unlimited
    maxWordCount: -1,

    // Maximum allowed Char Count, -1 is default for unlimited
    maxCharCount: -1
};

其中，“wordcount”是插件名称，这里我们将它设为了extraPlugins的值，表示我们需要使用该插件。

1. 编辑器中使用自定义插件

打开CKEditor的编辑器窗口，可以看到工具栏多了一个“Word Count”按钮，单击该按钮后即可看到字数统计结果。

示例二：添加一个自定义上传图片插件

1. 下载自定义插件
   可以从Github上找到“ckeditor-image-upload-plugin”插件，下载地址为：https://github.com/jaredwilcurt/ckeditor-image-upload-plugin。该插件提供了从本地上传图片到服务器并在编辑器中展示的功能。

2. 复制自定义插件到CKEditor文件夹
   将ckeditor-image-upload-plugin文件夹内的“plugin.js”文件复制到CKEditor文件夹内的“plugins”目录下。

3. 修改config.js文件
   在CKEditor的安装目录下找到“config.js”文件，添加下列代码：

config.extraPlugins = 'simpleupload';
config.simpleUpload = {
  // The URL that handles the file uploads
  uploadUrl: '/path/to/upload/handler',

  // The name of the file input field that contains the file information
  fileInputName: 'upload',

  // Additional data that will be passed to the upload script
  extraData: {
    'username': 'johndoe'
  }
};

其中，“simpleupload”是插件名称，这里我们将它设为了extraPlugins的值，表示我们需要使用该插件。

1. 编辑器中使用自定义插件

打开CKEditor的编辑器窗口，可以看到工具栏多了一个“Upload Image”按钮，单击该按钮后即可上传本地图片到服务器并在编辑器中展示。