先上动图，看看效果。
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
