ckeditor插件开发简单实例

admin 网页编辑器

2023-12-07 0 370

CKeditor就是FCKeditor，在发布一个新版本的时候，把自己的名字都改了，不要\”F\”。

需求：我需要在编辑文本的时候，选择一段文字，点击自定义的按钮，就能够在这段文字后面增加一个图标，图标超链接去一个地址，以选中的文字作为参数。

做法：

1、在CKeditor的plugins文件夹下，创建新文件夹\”addmap\”，这个名字可以自定义，这个名字是我项目中用的名字

2、在addmap文件夹下，放一张gif图片\”map.gif\”，用来作图标用的。

3、在addmap文件夹下，新建\”plugin.js\”，编辑这个js文件，我们这里的代码是：

复制代码代码如下:(function() { //Section 1 : 按下自定义按钮时执行的代码 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!=\’\’){ editor.insertHtml(data+\'<a href=\”/map_index.html?ad=\’+data+\’\”><img border=\”0\” height=\”24\” src=\”/images/map_icon.gif\” width=\”24\” /></a>\’); } } }, b = \’addmap\’; CKEDITOR.plugins.add(b, { init: function(editor) { editor.addCommand(b, a); editor.ui.addButton(\’addmap\’, { label: \’add map link\’, icon: this.path + \’map.gif\’, command: b }); } });})();

4、回到CKeditor的根目录，编辑config.js

复制代码代码如下:CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:config.language = \’zh-cn\’;//config.uiColor = \’#AADC6E\’;//字体.config.font_names = \’宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;\’;//工具按钮 config.toolbar=[ [\’Source\’,\’-\’,\’Preview\’], [\’Cut\’,\’Copy\’,\’Paste\’,\’PasteText\’,\’PasteFromWord\’,\’-\’,\’Print\’,\’Link\’,\’Unlink\’,\’Anchor\’], [\’Undo\’,\’Redo\’,\’-\’,\’Find\’,\’Replace\’,\’-\’,\’SelectAll\’,\’RemoveFormat\’], [\’addmap\’]];

config.extraPlugins = \’addmap\’;

5、测试

您可能感兴趣的文章: