ckeditor插件开发简单实例

当编辑CKeditor文本时，你只需选择一段文字，点击自定义按钮，即可在这段文字后添加一个图标，该图标将超链接到一个地址，并以选中的文字作为参数。这一功能不仅提升了编辑体验，也使得内容展示更加生动。

实现这一功能的具体步骤如下：

1. 在CKeditor的plugins文件夹下创建一个新文件夹，命名为“addmap”。这个名称可以根据你的项目需求进行自定义。

2. 在“addmap”文件夹中放入一张GIF图片，命名为“map.gif”，作为超链接的图标。

4. 修改CKeditor的根目录下的config.js文件，添加对“addmap”插件的配置，包括工具栏的添加以及额外插件的声明。

5. 完成以上步骤后，进行测试。

具体的JS和config配置代码如下：

（JS代码）

```javascript

(function() {

var a = {

exec: function(editor) {

var data = "";

var mySelection = editor.getSelection();

if (CKEDITOR.env.ie) {

mySelection.unlock(true);

data = mySelection.getNative().createRange().text;

} else {

data = mySelection.getNative();

}

if (data != null && data != '') {

editorsertHtml(data + '');

}

}

}, b = 'addmap';

CKEDITOR.plugins.add(b, {

init: function(editor) {

editor.addCommand(b, a);

editor.ui.addButton('addmap', {

label: '添加地图链接',

icon: this.path + 'map.gif',

mand: b

});

}

});

})();

```

（config配置）

```javascript

CKEDITOR.editorConfig = function( config ){

// 其他配置...

config.toolbar = [

['Source','-','Preview'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','Link','Unlink','Anchor'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['addmap'] // 添加自定义按钮至工具栏中

]; // 其他配置... config.extraPlugins = 'addmap'; // 添加额外插件声明。};```最后一步是测试阶段，你可以通过访问你的网站并尝试使用CKeditor编辑器来验证这一功能是否成功实现。这样你就可以轻松地在编辑文本时添加带有超链接的图标了。