• summernote 先来说一个我绝对不推荐的富文本。这是一个韩国人开源的富文本(当然不推荐的理由不是因为这个)，它对很多富文本业界公认的默认行为理解是反其道而行的，而且只为用了一个 dialog 的功能，引入了 bootstrap，一堆人抗议就是不改。格式化也是差劲。。反正不要用！不要用！不要用！

• ckeditor ckeditor 也是一家老牌做富文本的公司，楼主旧版后台用的就是这个，今年也出了 5.0 版本，ui 也变美观了不少，相当的不错，而且它号称是插件最丰富的富文本了。推荐大家也可以试用一下。

• quill 也是一个非常火的富文本，长相很不错。基于它写插件也很简单，api 设计也很简单。楼主不选择它的原因是它对图片的各种操作不友善，而且很难改。如果对图片没什么操作的用户，推荐使用。

• medium-editor 大名鼎鼎的 medium 的富文本(非官方出品)，但完成度还是很不错，拓展性也不错。不过我觉得大部分用户还是会不习惯 medium 这种写作方式的。

• squire 一个比较轻量的富文本，压缩完才 11.5kb，相对于其它的富文本来说是非常的小了，推荐功能不复杂的建议使用。

• wangEditor 一个国人写的富文本，用过感觉还是不错的。不过毕竟是个人的，不像专门公司做富文本的，配置型和丰富性不足。前端几大禁忌就有富文本 为什么都说富文本编辑器是天坑?，不过个人能做成这样子很不容易了。

• 百度 UEditor 没有深入使用过，只在一个 angular1X 的项目简单用过，不过说着的 ui 真的不好看，不符合当今审美了，官方也已经很久没更新过了。

• slate 是一个 完全 可定制的富文本编辑框架。通过 Slate，你可以构建出类似 Medium、Dropbox Paper 或者 Canvas 这样使用直观、富交互、体验业已成为 Web 应用标杆的编辑器。同时，你也无需担心在代码实现上陷入复杂度的泥潭之中。看起来很酷，以后有机会我会在项目中实践试用一下。

富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。

Tinymce

这里来简单讲一下在自己项目中使用 Tinymce 的方法。

已废弃
目前采用全局引用的方式。代码地址：static/tinymce (static 目录下的文件不会被打包), 在 index.html 中引入。并确保它的引入顺序在你的app.js之前！

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

如果想修改 cdn 地址或者 tinymce 的版本只需在 @/components/Tinymce 中找到 tinymce 的 cdn 地址进行修改就可以了。它会通过dynamicLoadScript自动注入的 index.html 中。

由于目前使用 npm 安装 Tinymce 方法比较复杂而且还有一些问题(日后可能会采用该模式)且会大大增加编译的时间所以暂时不准备采用。👾

使用: 由于富文本不适合双向数据流，所以只会 watch 传入富文本的内容一次变化，之后传入内容的变化就不会再监听了，如果之后还有改变富文本内容的需求。

可以通过 this.refs.xxx.setContent() 手动来设置。

源码也很简单，有任何别的需求都可以在 @/components/Tinymce 中自行修改。

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

目前提供了如下几个属性，有需求可自行添加，或者提 issue。

#tinymce-vue

tinymce 官方也在之前发布了 vue 版本的tinymce-vue，帮你封装好了很多东西，但同时也相对的减少了灵活性，有兴趣的可以自行研究一下。

下面来一段VUE用法代码

• 安装

npm install @tinymce/tinymce-vue -s

• 实际是用

<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>