经过7天的时间终于把流程引擎的表单编辑器写完了,该编辑器基于kindeditor以插件的形式编写,其实前面3天一直在研究kindeditor。插件的右键功能也研究了一天,由于在官网没有找到右键是如何做的,所有只有自己在他的源代码里找了,在此记录下开发的过程。
第一天,在网上搜索在线html编辑器,比较了几个编辑器,1.觉得kindedito界面比较清爽,2.文档官网也有一些,3.需要的表格单元格合并等功能也有。
第二天,学习kindeditor的插件编程,以label插件开始尝试自己写,其它功能都可以实现唯独插件右键菜单不知道如何实现
第三天,重构自己的js代码
第四天,终于找到了kindeditor插件的右键是如何实现的了,并完善了label插件
后面的事情就简单多了,由于在公司呆了4年左右时间,公司的业务比较熟悉,因此在上班的时间经常被别的同事叫走,或者开会等有其它事情,中间确实也耽误了不少时间。下面我就给说说插件的右键功能是如何做的吧,首先打开kindeditor源代码找到下面的代码
self.plugin.getSelectedAnchor = function() {
return _getImageFromRange(self.edit.cmd.range, function(img) {
return img[0].className == 'ke-anchor';
});
};
_each('link,image,flash,media,anchor'.split(','), function(i, name) {
var uName = name.charAt(0).toUpperCase() + name.substr(1);
_each('edit,delete'.split(','), function(j, val) {
self.addContextmenu({
title : self.lang(val + uName),
click : function() {
self.loadPlugin(name, function() {
self.plugin[name][val]();
self.hideMenu();
});
},
cond : self.plugin['getSelected' + uName],
width : 150,
iconClass : val == 'edit' ? 'ke-icon-' + name : undefined
});
});
self.addContextmenu({ title : '-' });
});
self.plugin.getSelectedAnchor这个方法可以让程序查找右键时,鼠标所在的位置是不是Anchor插件。下面这个each就是给这些插件初始化话右键菜单。明白了这些后就可以开发自己的,完全独立于kindeditor源的插件了。
附上一个表单设计器的图