ckeditor插件开发简单实例

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、测试

(0)

相关推荐

  • ckeditor自定义插件使用方法详解

    ckeditor是一款功能很强大的富文本编辑的工具,给我们提供了绝大多数功能,满足我们日常开发所用,但由于特殊情况,可能会需要修改ckeditor的插件.ckeditor提供了给我们很方便扩展插件的接口. 最经由于项目的需要,需要重写ckeditor的上传图片的功能,以下是自定义图片上传功能的部分代码: 1.在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以图片,在images目录下放入插件图片image.

  • fckeditor 插件开发参考文档

    一:插件的目录结构 插件目录的名称必须和插件的名称一样,而且目录里面必须包含一个fckplugin.js文件.可选包含一个lang目录用来实现界面的国际化.每一个文件定义一种语言,文件名不包含.js,用FCKConfig.Plugins.Add()注册.如果实现的插件命令没有界面,也可以不需要支持任何语言. 比如:findreplace插件的目录结构如下: /editor/plugins/findreplace/fckplugin.js /editor/plugins/findreplace/l

  • FCKeditor 插件开发 示例(详细版本)

    (FCKeditor.地址是:http://www.fckeditor.net/.我下载的版本是:2.6.3.)What ?      FCKeditor一直是web上编辑器的比较好的一个选择,他是开源的,而且效果不错.FCKeditor的插件是对FCKeditor的扩展功能.Why?尽管一般条件下FCKeditor能适应使用,但你可能对FCKeditor仅有的功能不满意,好.FCKeditor提供了插件开放功能,只要你能想到,你就做吧.How?        我就一个简单的"Hello&quo

  • CKEditor 附插入代码的插件

    按照惯例,先来段废话:CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 从官网下载ckeditor,我下载的是ckeditor_3.0.2.CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter". 1.在"cked

  • asp.net 为FCKeditor开发代码高亮插件实现代码

    所以就为FCKeditor写了个InsertCode的插件.整个插件的制作过程非常简单:FCKeditor插件开发请参考FCKeditor官网的文档: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins 首先,我们在FCKeditor/editor/plugins目录下新建一个insertcode目录,并在insertcode目录下新建一个fckplugin.js文件. 在新建的fckpl

  • fckeditor 修改记录添加行距功能插件

    fckconfig.js 中修改 添加 复制代码 代码如下: FCKConfig.LineHeights = '100%;150%;200%;250%;300%' ; 'Size' : { Element : 'span', Styles : { 'font-size' : '#("Size","fontSize")' }, Overrides : [ { Element : 'font', Attributes : { 'size' : null } } ] },

  • 添加FCKeditor插件需要注意的地方

    于是在上WC之际决定要改造一下编辑器.不过我一般动手之前会google一下,这样往往会很有效果,发现了其实FCKeditor支持插件的,很多插件经过简单的配制就可以使用了.不过这方面讲怎么用插件的资料就很少了(也许我太笨),给你一个插件包,究竟要怎么用呢?试验了几个插件也找到了相应的方法,其实很简单的. 1.把插件放到相应的插件目录"/FCKeditor/edito/plugins/"里面. 2.打开"/FCKeditor/fckconfig.js",找到"

  • fckeditor 插件实例 制作步骤

    以创建一个简单的超级链接为例.可以从已经存在的placeholder插件的目录作为基本的骨架. 1. 命名插件名称为:"InsertLink". ,并建立同名的目录,并且在InsertLink目录下创建一个Lang的目录,lang目录下至少有一个文件en.js.该文件中至少要有按钮和对话框标题的国际化信息,比如: FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //按钮的标题 FCKLang.InsertLinkDlgTitle = 'Link

  • ckeditor syntaxhighlighter代码高亮插件,完美修复

    CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵 来个图 使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C

  • SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

    上网搜索了一下相关的文章不少,大同小异,本人一直使用的是CKeditor的文字编辑器,所以偿试使用网上很多网友介绍的SyntaxHighlighter配合CKEditor插件的方式实现.可能是因为SyntaxHighlighter和CKEditor版本不同,过程中遇到了一些问题,解决的同时也根据个人理解做部分调整,所以本文所描述的方法仅供参考. 一.SyntaxHighlighter简介 SyntaxHighlighter(原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代

随机推荐