• summernote 先來(lái)說(shuō)一個(gè)我絕對(duì)不推薦的富文本。這是一個(gè)韓國(guó)人開(kāi)源的富文本(當(dāng)然不推薦的理由不是因?yàn)檫@個(gè))，它對(duì)很多富文本業(yè)界公認(rèn)的默認(rèn)行為理解是反其道而行的，而且只為用了一個(gè) dialog 的功能，引入了 bootstrap，一堆人抗議就是不改。格式化也是差勁。。反正不要用！不要用！不要用！

• ckeditor ckeditor 也是一家老牌做富文本的公司，樓主舊版后臺(tái)用的就是這個(gè)，今年也出了 5.0 版本，ui 也變美觀了不少，相當(dāng)?shù)牟诲e(cuò)，而且它號(hào)稱是插件最豐富的富文本了。推薦大家也可以試用一下。

• quill 也是一個(gè)非?；鸬母晃谋荆L(zhǎng)相很不錯(cuò)?；谒鼘?xiě)插件也很簡(jiǎn)單，api 設(shè)計(jì)也很簡(jiǎn)單。樓主不選擇它的原因是它對(duì)圖片的各種操作不友善，而且很難改。如果對(duì)圖片沒(méi)什么操作的用戶，推薦使用。

• medium-editor 大名鼎鼎的 medium 的富文本(非官方出品)，但完成度還是很不錯(cuò)，拓展性也不錯(cuò)。不過(guò)我覺(jué)得大部分用戶還是會(huì)不習(xí)慣 medium 這種寫(xiě)作方式的。

• squire 一個(gè)比較輕量的富文本，壓縮完才 11.5kb，相對(duì)于其它的富文本來(lái)說(shuō)是非常的小了，推薦功能不復(fù)雜的建議使用。

• wangEditor 一個(gè)國(guó)人寫(xiě)的富文本，用過(guò)感覺(jué)還是不錯(cuò)的。不過(guò)畢竟是個(gè)人的，不像專門(mén)公司做富文本的，配置型和豐富性不足。前端幾大禁忌就有富文本 為什么都說(shuō)富文本編輯器是天坑?，不過(guò)個(gè)人能做成這樣子很不容易了。

• 百度 UEditor 沒(méi)有深入使用過(guò)，只在一個(gè) angular1X 的項(xiàng)目簡(jiǎn)單用過(guò)，不過(guò)說(shuō)著的 ui 真的不好看，不符合當(dāng)今審美了，官方也已經(jīng)很久沒(méi)更新過(guò)了。

• slate 是一個(gè) 完全 可定制的富文本編輯框架。通過(guò) Slate，你可以構(gòu)建出類(lèi)似 Medium、Dropbox Paper 或者 Canvas 這樣使用直觀、富交互、體驗(yàn)業(yè)已成為 Web 應(yīng)用標(biāo)桿的編輯器。同時(shí)，你也無(wú)需擔(dān)心在代碼實(shí)現(xiàn)上陷入復(fù)雜度的泥潭之中?？雌饋?lái)很酷，以后有機(jī)會(huì)我會(huì)在項(xiàng)目中實(shí)踐試用一下。

富文本是管理后臺(tái)一個(gè)核心的功能，但同時(shí)又是一個(gè)有很多坑的地方。在選擇富文本的過(guò)程中我也走了不少的彎路，市面上常見(jiàn)的富文本都基本用過(guò)了，最終權(quán)衡了一下選擇了Tinymce。

Tinymce

這里來(lái)簡(jiǎn)單講一下在自己項(xiàng)目中使用 Tinymce 的方法。

已廢棄
目前采用全局引用的方式。代碼地址：static/tinymce (static 目錄下的文件不會(huì)被打包), 在 index.html 中引入。并確保它的引入順序在你的app.js之前！

v4.2.0+ 之后改用了異步加載 CDN 的引入方式。

如果想修改 cdn 地址或者 tinymce 的版本只需在 @/components/Tinymce 中找到 tinymce 的 cdn 地址進(jìn)行修改就可以了。它會(huì)通過(guò)dynamicLoadScript自動(dòng)注入的 index.html 中。

由于目前使用 npm 安裝 Tinymce 方法比較復(fù)雜而且還有一些問(wèn)題(日后可能會(huì)采用該模式)且會(huì)大大增加編譯的時(shí)間所以暫時(shí)不準(zhǔn)備采用。??

使用: 由于富文本不適合雙向數(shù)據(jù)流，所以只會(huì) watch 傳入富文本的內(nèi)容一次變化，之后傳入內(nèi)容的變化就不會(huì)再監(jiān)聽(tīng)了，如果之后還有改變富文本內(nèi)容的需求。

可以通過(guò) this.refs.xxx.setContent() 手動(dòng)來(lái)設(shè)置。

源碼也很簡(jiǎn)單，有任何別的需求都可以在 @/components/Tinymce 中自行修改。

<tinymce :height="300" v-model="content" id='tinymce'></tinymce>

目前提供了如下幾個(gè)屬性，有需求可自行添加，或者提 issue。

#tinymce-vue

tinymce 官方也在之前發(fā)布了 vue 版本的tinymce-vue，幫你封裝好了很多東西，但同時(shí)也相對(duì)的減少了靈活性，有興趣的可以自行研究一下。

下面來(lái)一段VUE用法代碼

• 安裝

npm install @tinymce/tinymce-vue -s

• 實(shí)際是用

<template>
  <div>
    <tinymce-editor api-key="API_KEY" v-model ="content" :init="{plugins: 'wordcount'}"></tinymce-editor>
    <el-buttom @click="submit">

    </el-buttom>
  </div>
</template>

<script>

  // es modules
  import tinymceVue from '@tinymce/tinymce-vue';
  // commonjs require
  // NOTE: default needed after require
  var Editor = require('@tinymce/tinymce-vue').default;


  export default {
    name: "porductManager",
    data(){
      return{
        content:''
      }
    },
    components: {
      'tinymce-editor': Editor // <- Important part
    },
    methods:{
      submit(){
        console.log('content', content)
      }
    }
  }
</script>

<style scoped>

</style>