富文字

管理後臺富文字也是一個非常重要的功能，樓主在這裡也踩了不少的坑。樓主在專案裡最終選擇了tinymce
這裡在簡述一下推薦使用tinymce的原因：tinymce是一家老牌做富文字的公司(這裡也推薦ckeditor，也是一家一直做富文字的公司，也不錯)，它的產品經受了市場的認可，不管是文件還是配置的自由度都很好。在使用富文字的時候有一點也很關鍵就是複製格式化，之前在用一款韓國人做的富文字summernote被它的格式化坑的死去活來，但tinymce的去格式化相當的好，它還有一個增值專案就是powerpaste,那是無比的強大，支援從word裡面複製各種東西，都不會有問題。富文字還有一點也很關鍵，就是拓展性。樓主用tinymce寫了好幾個外掛，學習成本和容易度都不錯，很方便拓展。最後一點就是文件很完善，基本你想得到的配置項，它都有。tinymce也支援按需載入，你可以通過它官方的build頁定製自己需要的plugins。
我再來分析一下市面上其它的一些富文字：

• 先來說一個我絕對不推薦的富文字。這是一個韓國人開源的富文字(當然不推薦的理由不是因為這個^_^)，它對很多富文字業界公認的預設行為理解是反起到而行的，而且只用了一個dialog的功能，引入了boostrap，一堆人抗議就是不改。格式化也是懶得一批。。反正不要用！不要用！不要用！

• ckeditor也是一家老牌做富文字的公司，樓主舊版後臺用的就是這個，今年也出了4.0版本，ui也變美觀了不少，相當的不錯，而且它號稱是外掛最豐富的富文字了。推薦大家也可以試用一下。

• quill 也是一個非常火的富文字，長相很不錯。基於它寫外掛也很簡單，api設計也很簡單。樓主不選擇它的原因是它對圖片的各種操作不友善，而且很難改。如果對圖片沒什麼操作的使用者，推薦使用。

• 大名鼎鼎的medium的富文字(非官方出品)，但完成度還是不很不錯，拓展性也不錯。不過我覺得大部分使用者還是會不習慣medium這種寫作方式的。

• 一個比較輕量的富文字，壓縮完才11.5kb，相對於其它的富文字來說是非常的小了，推薦功能不復雜的建議使用。

• 一個國人寫的富文字，用過感覺還是不錯的。不過畢竟是個人的，不像專門公司做富文字的，配置型和豐富性不足。前端幾大禁忌就有富文字 為什麼都說富文字編輯器是天坑?，不過個人能做成這樣子很不容易了。

• 沒有深入使用過，只在一個angular1X的專案簡單用過，不過說著的ui真的不好看，不符合當今審美了，官方也已經很久沒跟新過了。

一、使用vue-quill-editor富文字外掛

npm安裝： npm install vue-quill-editor -- save

<template>
  <div>
    <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
  </div>
</template>

<script>
  import {quillEditor} from 'vue-quill-editor'; // 匯入quillEditor元件
  export default {
    data: function () {
      return {
        content: 'this is a simple demo',                // 編輯器的內容
        editorOption: {             // 編輯器的配置
          // something config
        }
      }
    },
    components: {
      quillEditor                 // 宣告元件quillEditor
    }
  }
</script>

二、效果圖