流程表单编辑器

经过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源的插件了。

附上一个表单设计器的图

 

 

转载于:https://www.cnblogs.com/liuhaili/archive/2011/10/16/2214405.html