持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

富文本是很多企业后台管理项目中都需要的。而富文本也有很多种，基本功能都差不多，但也会有自己特有的功能。在平时项目中也用过很多不同的富文本插件，今天推荐几个比较常用，方便使用的富文本。

目前市面上也有不少的富文本插件，比如

TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器。插件丰富，接口丰富，界面好看，提供经典、内联、沉浸无干扰三种模式
tinymce GitHub start 很多，功能也齐全，从 word 粘贴过来还能保持绝大部分格式的编辑器，前后端分离
UEditor 百度开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲
bootstrap-wysiwyg 微型，易用，小而美
kindEditor 功能强大，代码简洁，需要配置后台，而且好久没见更新了
wangEditor 轻量、简洁、易用，但是升级到 3.x 之后，不便于定制化开发
quill 本身功能不多，不过可以自行扩展
summernote UI挺漂亮，是一款小而美的编辑器

下面我就介绍两种我常用的富文本，也是我感觉市面上比较好支持Vue的富文本插件

tinymce

TinyMCE

tinymce中文文档：tinymce.ax-z.cn/

项目中使用他很简单

下载
- 第一步：下载 TinyMCE
  - Vue 2 项目 npm install tinymce@5.1.0 -S ; Vue 3 项目 npm install tinymce -S
- 第二步：下载 tinymce-vue
  - Vue 2 项目 npm install @tinymce/tinymce-vue@3.0.1 -S ; Vue 3 项目 npm install @tinymce/tinymce-vue -S
- 第三步：这里我们需要下载他的中文安装包，方便我们在项目中使用他，如果你的英文ok，这一步省略他
  - 地址：www.tiny.cloud/get-tiny/la… 下载好后，放到静态文件public目录下即可
下载安装好插件后，我们就可以使用他了

使用一般项目中，都是把富文本封装成一个组件，这样方便调用

封装 TinyMCE

<template>
    <div>
        <editor v-model="myValue"
          :init="init"
          :disabled="disabled"
          @onClick="onClick">
        </editor>
    </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/image'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
export default {
    components:{
        Editor
    },
    name:'tinymce',
    props: {
        value: {
          type: String,
          default: ''
        },
        plugins: {
          type: [String, Array],
          default: 'lists image media table wordcount'
        },
        toolbar: {
          type: [String, Array],
          default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat'
        }
    },
    data(){
        return{
            init: {
                language_url: '/tinymce/langs/zh_CN.js',
                language: 'zh_CN',
                skin_url: '/tinymce/skins/ui/oxide',
                height: 300,
                plugins: this.plugins,
                toolbar: this.toolbar,
                branding: false,
                menubar: false
              },
              myValue: this.value
        }
    },
    mounted () {
        tinymce.init({})
    },
}

</script>

tinymce 组件使用

<template>
 <div>
   <tinymce ref="editor"
            v-model="msg"
            :disabled="disabled"
   />
 </div>
</template>
<script>
import tinymce from '@/components/tinymce'

export default {
   name: 'component',
   components: {
       tinymce
   },
   data(){
       return{
           msg: 'vue中使用 Tinymce Editor',
           disabled: false
       }
   }
}
</script>

实战: Vue引入富文本

TinyMCE