ckeditor_3.6.4添加插件方法

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-02-27   阅读次数: 799   查看权限: 游客查看

CKEditor 是目前市场上比较灵活的在线WYSIWYG编辑器之一. 它灵活的设计, 开放的API和详细的文档使得用户扩展功能非常容易. 本文尝试勾勒出 CKEditor插件开发的基础,包含了增加按钮,对话框和执行命令.

ckeditor_3.6.4添加插件方法:

1.在ckeditor\plugins\下新建insertcode目录,然后再新建imaes目录存放code.gif按钮图片。

2.在insertcode目录下新建insertcode.js文件,即ckeditor\plugins\insertcode.js 代码如下:

CKEDITOR.dialog.add('insertcode', function(a){
	var b = a.lang.insertcode;
    return {
        title:b.title,
        resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
        minWidth: 500,
        minHeight: 300,
        contents: [{
            id: 'cb',
            elements: [{
                type: 'select',
                label: b.selectl,
                id: 'lang',
                required: true,                
                items: [['asp/vb', 'vb'], ['javascript', 'jscript'], ['css', 'css'], ['xml', 'xml'], ['php', 'php'], ['java', 

'java'], ['spl', 'spl']],
				'default': 'asp/vb'
            }, {
                type: 'textarea',
                label: b.inputc,
                id: 'code',
				rows:14,
                'default': ''
            }]
        }],
        onOk: function(){
            code = this.getValueOf('cb', 'code');
            lang = this.getValueOf('cb', 'lang');
			if (lang==""){
				alert("请选择脚本语言");
				return false;
			}else if(code==""){
				alert("请输入代码");
				return false;
			}else{
				a.insertHtml("<pre name=\"code\" class=\"" + lang + "\">" + escape(code) + "</pre>");
			}			
        },
        onLoad: function(){}
    };
});

3.在ckeditor.js里添加代码 plugins:'about,insertcode,basicstyles' 其实就是给工具栏里添加按钮,如果有另定义按钮栏也要相应加入。同时对应加上:

j.add('insertcode', {requires: ['dialog'],init: function(l){l.addCommand('insertcode', new a.dialogCommand

('insertcode'));l.ui.addButton('insertcode', {label: l.lang.insertcode.title,command: 'insertcode',icon: this.path + 

'images/code.gif'});a.dialog.add('insertcode', this.path + 'insertcode.js');}});

也就是找到其他j.add()字样在后面加上。使工具栏按钮能正常调用。

4.在语言包里对应加上翻译:

//ckeditor\lang\zh-cn.js文件
,insertcode:{title:'插入源代码',selectl:'选择脚本语言',inputc:'输入代码'}
//cheditor\lang\en.js文件
,insertcode:{title:'Insert Code',selectl:'Select Language',inputc:'input code'}

至此插件算完成。

关键词: ckeditor,插件,fckeditor   编辑时间: 2013-02-27

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
100%(1)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐