手把手教你 CKEDITOR 4 扩展插件制作

本文旨在详细介绍如何手把手教你制作CKEDITOR 4的扩展插件。让我们一同如何创建自定义按钮以及实现点击按钮后的功能。以下是你需要遵循的步骤和相关操作注意事项。

我们需要准备一个图标。这个图标最好是尺寸为16x16的png格式图片。如果你没有合适的图标，我可以为你提供一张。

接下来，在ckeditor的plugins目录下创建与你的自定义插件同名的目录。然后，在此目录中创建一个名为plugin.js的文件。这个文件将包含你的插件的基本信息和配置。

然后，在你的插件目录中创建一个dialogs目录。在这个目录中，新建一个与你插件同名的js文件。这个文件将实现你的插件的主要功能。

现在让我们详细了解一下这些步骤。你需要创建一个包含自定义按钮的编辑器实例。然后，你需要定义一个命令来响应按钮的点击事件。你可以使用CKEditor 4的命令系统来定义你的命令，并通过相应的插件来扩展编辑器功能。你还可以使用CKEditor 4的API来访问编辑器的实例和方法，以实现更高级的功能。

在实现自定义按钮功能的过程中，需要注意一些事项。确保你的图标尺寸正确且格式正确。确保你的插件目录结构正确，以便CKEditor 4能够正确加载你的插件和命令。注意编写高质量的代码，以便在将来的开发和维护过程中更容易进行更改和扩展。

姜哥的编辑器插件之旅：建立自定义插件myplug并配置toolbar

步骤一：建立插件目录与文件结构

在ckeditor/plugins/目录下，姜哥创建了一个名为myplug的新目录，作为其未来插件的归宿。此目录将承载我们的自定义插件myplug的所有文件和代码。

步骤二：编写plugin.js文件，定义插件行为

在plugin.js文件中，我们填充了以下代码。该代码定义了一个简单的自定义按钮行为，即当按下按钮时，弹出一个提示框显示“这是一个自定义按钮！”。也定义了如何创建这个按钮并与特定功能绑定。值得注意的是，我们在代码中多次提到了myplug这个名字，并且强调了名字的前后一致性，以避免后续运行问题。因为很多时候，运行出错往往源于名称的不匹配。

步骤三：整合config.js文件，配置toolbar以显示插件图标

在config.js文件中，我们做了两项关键配置。我们在extraPlugins中注册了我们的自定义插件myplug，让ckeditor知道我们的存在。我们在toolbar的配置中，通过添加一个新的配置对象'custome_plugin'，将我们的自定义插件图标添加到toolbar中。我们注意到在添加自定义图标时，需要注意图标的路径是否正确。还提到了如果在配置过程中出现问题时，可以从两个方面进行排查：一是检查代码中是否有名称错误；二是检查文件的编码问题。

后续步骤与预期效果

完成上述步骤后，保存并运行代码，应该可以看到自定义的插件图标已经成功显示在toolbar上。当点击这个图标时，目前并没有与之对应的dialog代码，因此不会有任何响应。接下来，我们需要开发对应的dialog代码，以响应用户的点击操作。这将是后续开发的重要任务。在这个过程中，可能会遇到各种挑战和问题，需要我们一步步地去解决和克服。这是一个充满挑战和乐趣的过程，让我们一起期待这个自定义插件的最终表现吧！开发dialogs/myplug.js，实现业务功能

在myplug/dialogs/目录下，新建名为myplug.js的文件。这个文件与plugin.js中的一行代码相对应：

```javascript

CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字要保持一致

```

在这个文件中，我们将定义一个新的对话框功能。让我们来看一下具体的实现：

```javascript

(function () {

// 定义myplugDialog函数，接收editor作为参数

function myplugDialog(editor) {

return {

// 对话框的标题

title: '向谁问候?',

// 对话框的最小宽度和高度

minWidth: 300,

minHeight: 80,

// 对话框的按钮，包括自定义按钮、确定按钮和取消按钮

buttons: [

{

type: 'button',

id: 'customButton', //自定义按钮的ID，便于后续操作

label: '问候', //按钮的显示文本

onClick: function () {

// 点击按钮时的操作，这里弹出提示框

alert('点击了自定义按钮');

}

},

CKEDITOR.dialog.okButton, // 确定按钮，通常用于提交对话框内容

CKEDITOR.dialog.cancelButton // 取消按钮，用于关闭对话框

],

// 对话框的内容，这里定义了一个tab页，里面包含一个输入框用于输入名字

contents: [

{

id: 'userTab', // tab页的ID，便于后续操作

label: '你的名字', // tab页的标题和显示文本

elements: [ // tab页中的元素，这里是一个文本输入框

{

id: 'nameInput', // 输入框的ID，便于后续操作

type: 'text', // 输入框的类型为文本类型

style: 'width: 50%;', // 输入框的样式宽度为容器宽度的50%

label: '你的名字' // 输入框的标签提示文字

}

]

}

],

=========================

在文本编辑的世界里，我们常常遇到格式转换与编码问题。尤其是当我们处理涉及中文编码的内容时，乱码问题常常困扰着我们。今天，我将带大家了解CKEditor的自定义插件功能，并分享一种在Notepad++中进行编码格式转换的方法。下面是我的体验分享。

在学习的过程中，我遇到了两种常见的问题：一是名称前后不一致，二是中文编码格式引起的乱码。对于前者，需要仔细核对名称的拼写和格式；对于后者，转换编码格式则能有效解决。在Notepad++中，你可以通过改变编码格式的设置来解决乱码问题。我尝试了重新保存文件并转换编码格式的方法，效果良好。

对于对JavaScript感兴趣的读者，这里还有丰富的专题内容等待你们。《XXX专题》、《XXX指南》、《XXX教程》等栏目将带你深入了解JavaScript的各个方面。从基础到进阶，从理论到实践，这里都有。

CKEditor的自定义插件功能为我们带来了便捷的内容交互体验，而编码格式的转换则解决了我们在处理中文内容时遇到的乱码问题。希望这些分享能对大家的JavaScript程序设计有所帮助。如果你还有任何问题或需要进一步的指导，欢迎随时向我提问。在这里，你会发现更多编程的乐趣和技巧。

结尾提醒一句：如果遇到任何技术问题或疑问，请随时与我联系。我将尽力为你提供帮助和支持。让我们一起在编程的道路上共同进步！