一文完全掌握富文本编辑器TinyMCE

一、安装和引入

TinyMCE 是主流富文本编辑器，功能非常全，你需要的大多数功能它都支持，类似在线版的 Word。但它的优势也恰恰是它的劣势，如此之多的功能都放上来导致整个编辑器非常重，如果只是需要简单功能，上这么复杂的编辑器，大材小用。

TinyMCE 对 Vue.js 的集成和安装非常友好，支持 Vue3 和 TypeScript，文档写的也非常好。

TinyMCE-Vue文档
TinyMCE 6 原生文档

1. 安装

npm install --save "@tinymce/tinymce-vue@^5"

2. 引入

<script setup>
import {
   
   ref} from 'vue'
import Editor from '@tinymce/tinymce-vue'

const setting=ref({
   
   
  xxx
})
const content=ref('')
</script>

<template>
<Editor
    api-key="xxx"
    :init="setting"
    v-model="content"
/>
</template>

其中，api-key需要到https://www.tiny.cloud/my-account/integrate注册并获取，否则编辑器是只读状态。

3. 三种模式

TinyMCE有三种模式：经典模式（classic）、内联模式（inline）、简洁模式（distraction-free）。

经典模式是默认模式，其在页面内嵌入iframe，编辑器里的内容和样式处于沙箱中，不会收到页面其它内容的影响。

内联模式需要初始化时配置 inline: true，内联区域未激活时，编辑器处于隐藏状态，当内联区域被激活时，编辑器工具栏才会显示。这种特性可用于所见即所得的页面编辑，且编辑器内容可受到页面其它区域的样式和脚本的影响。注意，内联模式在移动设备下无效。

简洁模式是基于内联模式，通过插件quickbars增强了交互性，要启用简洁模式，可在初始化时配置：plugins:['quickbars'], toolbar: false, menubar: false, inline: true

4. 手机端应用

为了使手机端编辑器正确表现，需要在页面head段添加元信息：<meta name="viewport" content="width=device-width, initial-scale=1">。

注意，有些功能在手机端并不支持，比如inline、toolbar_sticky、table_grid、resize、object_resizing等。

二、初始化参数

1. 基本参数

// 尺寸
max_height:800,
min_height:400,
width: '100%'

menubar: true, // 设置富文本编辑器菜单, 默认true
branding: false, // 关闭底部官网提示 默认true
statusbar: true, // 显示底部状态栏 默认true
readonly: false, // 设置只读属性 默认 false
resize: true, // 调节编辑器大小 默认 true
placeholder: '请输入内容', // 占位符

theme:'silver',
skin:'oxide',
content_style: 'body, p{font-size: medium;}', // 为内容区编辑自定义css样式
language_url: '/tinymce/langs/zh_CN.js', // 中文化 默认为英文
language: 'zh_CN', // 设置富文本编辑器语言

关于语言和皮肤：

在项目public目录下新建tinymce目录，在该目录下分别新建langs和skins目录，用于存放语言包和皮肤包。

语言包下载地址为：https://www.tiny.cloud/get-tiny/language-packages/。文件下载后放入/public/tinymce/langs目录下，并配置 language_url:"/tinymce/langs