MailEditor-Widget拖拽组件(基于Vue2)

先上动图，看看效果。

基本操作

maileditor的最重要的组件之一就是拖动(Drag and Drop) ，因为mail页面的特殊性，需要用到table的布局，基本的代码样式如下：

<table cellpadding="0" cellspacing="0" align="center" style="..." class="..."  >
  <tbody>
    <tr>
      <td align="center" valign="middle" style="..." class="..." >
        //这个地方放置内容，如html代码。
      <td>
    </tr>
  </tbody>
</table>

在这个组件中，使用的形式的配置文件，即我们完成一个样式，可以将其对应的Json格式保存，方便下一次修改应用，或者导出给其他人在同一系统中使用。json配置文件格式如下：

{
  "name": "bodyTable",
  "html": "",
  "htmlCode": {
    "type": "table",
    "class": {
      "bodyTable": true
    },
    "style": {
      "color": "#ffffff",
      "fontSize": "14px",
      "min-height": "300px",
      "background": "green"
    },
    "attrs": {
      "id": "bodyTable",
      "align": "center",
      "bgcolor": ""
    }
  },
  "td": [
    {
      "type": "td",
      "class": {},
      "style": {},
      "attrs": {
        "align": "center",
        "valign": "top"
      },
      "children": [
        {               // 下一 <table>
          "name": "..." 
           ...          
        },
        { ...  // table同级 }               
      ]
    },
    { ...  // td同级 }
  ]
}

我使用vue来实现，很容易发现，这个组件是一个递归组件，熟悉vue的同学一定要注意的点就是在递归组件中，'name'属性必须设置。vue其实就是用数据来驱动界面，在Vue2中简化了Dom的许多操作，因此在需要相对比较完全的Dom操作时，有两种方案。
Vue1中对Dom的操作比Vue2中多，所以组件需要较多Dom的操作时，一般选择Vue2。第二种就是具有Dom的完全编程能力Render函数。但是我选择的并不是Vue1，也不是Vue2中具有Vnode的Render函数来构建我所需的递归组件，而是Vue的Template组件加上一点Hack味道，使用.vue加vue-loader完成。

组件并没有写成插件形式，有一些小问题还没有解决，一些拖动的限制需要依据具体的应用场景来设定，组件里面的三个限制（分级限制，父级限制，临界限制）如下，必不可少。

isSelfOrAncestor () {...},  isParent () {...},  isNextToMe () {...}

在之后的版本里面，我会将它写成插件形式，并使用Vue2中的Render函数来实现。在github的Drag.vue中有使用Render函数完成过一版，Json配置文件与当前的版本不同。有兴趣的可以去看一下。
上github地址： https://github.com/kangschampagne/maileditor/blob/master/src/components/DnD.vue

---

如有建议和意见，麻烦联系，让我更好的改进。如果有写过编辑器经验的同学，虚心求教。
微博：kangschampage 微信：kangschampage