CKEditor自定义按钮插入服务端图片

第一步，创建一个新的插件或扩展CKEditor的现有插件。在这个插件中，你需要编写一个能够调用服务器接口的代码，获取图片列表并显示在前端。你可以使用Ajax或其他技术来实现这一功能。

第二步，在CKEditor的工具栏中添加一个新的按钮或菜单项，用于触发你刚刚创建的插件功能。你可以通过CKEditor的配置选项来实现这一点。

第一部分：定义插件

在 CKEditor 的 plugins 文件夹下，新建一个名为 serverimg 的文件夹。在此文件夹中，你需要创建一个 plugin.js 文件来定义插件的结构和功能。插件的代码如下所示：

```javascript

CKEDITOR.plugins.add(

"serverimg",

{

requires: ["dialog"],

lang: ["en"],

init: function (editor) {

// 添加命令

editor.addCommand("serverimg", new CKEDITOR.dialogCommand("serverimg"));

// 添加按钮到编辑器工具栏

editor.ui.addButton(

"serverimg",

{

command: "serverimg",

icon: this.path + "images/pic.png", // 使用自定义图标

}

);

// 定义对话框

CKEDITOR.dialog.add("serverimg", this.path + "dialogs/code.js");

}

}

);

```

确保在 serverimg 文件夹下有一个名为 images 的文件夹，里面存放了插件使用的图标图片，如 pic.png。

第二部分：定义插件对话框内容

在 serverimg 文件夹下创建一个 dialogs 子文件夹，用于存放对话框相关的代码。在 dialogs 文件夹内，你需要创建 code.js 文件和 PicPreview.html 文件。code.js 文件用于定义对话框的行为和内容。以下是 code.js 的示例代码：

```javascript

CKEDITOR.dialog.add(

"serverimg",

function (editor) {

var timestamp = Math.round(new Date().getTime() / 1000); // 生成时间戳用于缓存避免浏览器缓存问题

var ckeditorPage = '../../ImgMgr/ImgBrowser.aspx?from=ckeditor×tamp=' + timestamp; // iframe 加载的页面路径，用于浏览服务器图片

return { // 定义对话框结构和内容

在完成了激动人心的插件开发之后，我们的工作并未结束。为了让页面展示出我们精心制作的插件，我们需要在config.js文件中进行一番配置。寻找那个神秘的ckeditor文件夹，打开其中的config.js文件。在这个文件中，我们将要添加一项重要的配置：config.extraPlugins = 'serverimg'。这行代码就像是为我们的插件打开了一扇展示的大门，让我们的插件能够在页面上熠熠生辉。

四、见证成果的时刻

经过上述步骤，我们的工作终于要迎来收获的喜悦。最终的成果会是怎样的呢？让我们拭目以待。

以上就是本文的全部内容，希望这些步骤能对大家的学习有所帮助。每一个步骤都是我们努力的痕迹，每一个成功的瞬间都是我们坚持的结果。我们期待着你的进步，也希望你能够享受到这个过程。也希望大家能够支持我们的狼蚁SEO，一起更多的可能性，共同创造更美好的未来。

我们的插件已经开发完成，也已配置妥当，现在只需要等待最终的展现。就像一颗种子破土而出，展现它的生机与活力，我们的插件也将在页面上展现出它的魅力与功能。让我们一起期待那一刻的到来，共同见证我们的努力与成果。希望大家多多支持，与狼蚁SEO一同成长，一同进步！