300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html编辑器自定义脚本 ckeditor自定义插件使用方法详解

html编辑器自定义脚本 ckeditor自定义插件使用方法详解

时间:2024-03-20 05:30:33

相关推荐

html编辑器自定义脚本 ckeditor自定义插件使用方法详解

ckeditor是一款功能很强大的富文本编辑的工具,给我们提供了绝大多数功能,满足我们日常开发所用,但由于特殊情况,可能会需要修改ckeditor的插件。ckeditor提供了给我们很方便扩展插件的接口。

最经由于项目的需要,需要重写ckeditor的上传图片的功能,以下是自定义图片上传功能的部分代码:

1、在ckeditor/plugins/目录下新建editorupload目录,用来存放自定义插件;在该目录下新建目录images用来存放自定以图片,在images目录下放入插件图片image.png.

2、在editorupload目录下新建plugin.js:

(function () {

var a = {

exec: function (editor) {

//调用jsp中的函数弹出上传框,

var url = '../view/fileupload/upload.jsp';

openDialog({ //openDialog打开一个新窗口

title: '插入图片',

url: url,

height: 600,

width: 900,

callback:function(){

}

});

}

},

b = 'editorupload';

CKEDITOR.plugins.add('editorupload', {

init: function (editor) {

editor.addCommand(b, a);

editor.ui.addButton('editorupload', {

label: '添加图片', //鼠标悬停在插件上时显示的名字

icon: 'plugins/editorupload/images/image.png', //自定义图标的路径

command: b

});

}

});

})();

在上面代码中,新建了一个upload.jsp页面用来上传图片,使用了openDialog弹出一个新的窗口,设置了弹出框的高度和宽度。

CKEDITOR.plugins.add将自定义的editorupload加入到ckeditor中。

下面是部分upload.jsp页面代码:

批量上传

提交照片

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。