先上動圖，看看效果。

基本操作

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