一、介绍

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

中文官网：TinyMCE中文文档中文手册 (ax-z.cn)

官网及文档：www.tiny.cloud

官网下载：www.tiny.cloud/get-tiny/self-hosted/

Github：github.com/tinymce

【推荐】为vue开发者整合的tinymce组件

二、下载

项目是vue2，使用的tinymce版本是4.7.5，可点击【下载】源文件，然后解压到前端工程public文件夹下，如下图所示：

三、引入

在项目public文件夹中的index.html文件中引入tinymce，代码如下：

<script src="./tinymce4.7.5/tinymce.min.js"></script>

四、封装

封装好的组件可点击【下载】源文件引入到前端工程components目录下

五、使用

value就是传入富文本html字符串

<template>
  <Tinymce v-model="value" />
</template>

<script>
import Tinymce from "@/components/Tinymce/index";

export default {
  	components: { Tinymce },
    data: {
        return {
    	    value: ''
	    }
    }
}
</script>