CKEditor 4 預設 table responsive

前端在處理 responsive 時，table 元素一直是一個很頭痛的問題，處理得不好會導致網站有捲動軸的出現，如果是自己刻的還好處理，碰到編輯器那還是真的頭大。
所以要針對 CKEditor 插入 table 時做一些處理，讓他不會破壞網站版面。

實作方法

在 CKEditor 4 版本，在插入 table 時，會看到帶入預設參數


在這邊我們會將他處理成 width: 100%; 如果有稍微翻了一下文件的話，可以發現 dialogDefinition 這個事件，所以我們就可以處理寬度的部分。如果你想要預設帶入 html class 的話，範例也會提到。
如下範例：

CKEDITOR.on('dialogDefinition', function (event) {
    try {
      var dialogName = event.data.name
      var dialogDefinition = event.data.definition

      if (dialogName === 'table' || dialogName === 'tableProperties') {
        var advancedTab = dialogDefinition.getContents('advanced')
        var infoTab = dialogDefinition.getContents('info')
        var txtWidth = infoTab.get('txtWidth')
        txtWidth.default = '100%'

        var stylesField = advancedTab.get('advStyles')
        stylesField.default = 'width: 100%;'

        var cssClassField = advancedTab.get('advCSSClasses')
        cssClassField.default = 'mod-table table-list-view' // 預設 class
      }
    } catch (exception) {
      window.alert('Error ' + event.message)
    }
  })

如果不知道哪個欄位是什麼名稱的話，可以使用 Developer Tools 他會列出每個欄位的名稱，方便我們去修改預設值。

搞定預設值後，還有一件事情要處理，如果 table 太多列的話，還是會造成表單超出 container 的問題，所以這邊我們會在處理插入 table 時，在外面加一個 wrapper class 讓超出寬度還是會有捲動軸。
這個時候我們就會在 instanceReady 事件處理。
每當編輯器內容有變動的時候我們會在 table 外層包一個 wrapper 來處理客製化的 css
例如：

CKEDITOR.on('instanceReady', function (event) {
  var editor = event.editor

  editor.on('change', function (e) {
    var tables = e.editor.document.$.querySelectorAll('table:not(.has-wrapper)')
    if (tables.length > 0) {
      tables.forEach(function (table) {
        table.classList.add('has-wrapper')
        $(table).wrap('<div class="mod-table-responsive"></div>')
      })
    }
  })
})

這個時候我們再一點客製化的 css

.mod-table-responsive {
  overflow-x: auto;
}

這樣就算寬度不夠，也會有捲動軸避免破版。

結論

編輯器雖然是一個方便的工具，可是也會給前端帶來很多的麻煩，例如：

• 複製貼上帶來一堆奇怪的樣式
• 官方文件又寫得很混亂
• 預設帶入一些奇怪的參數
• 網路上討論的文章不多，又或是過期沒辦法解決問題。

這次處理完後寫了一篇筆記，希望能幫助到大家。