TinyMce富文本编辑器使用【详细】

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

TinyMCE的优势：

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

官网及文档：www.tiny.cloud

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

Github：github.com/tinymce

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

安装

经典模式 |TinyMCE中文文档中文手册 (ax-z.cn)

1. 安装依赖

npm install @tinymce/tinymce-vue -S
npm install tinymce -S 

2. 编辑器本身是英文编辑器，所以还需要下载本地化文件（下载这个）

• 语言包 |可信富文本编辑器 |TinyMCE

也可以这里获取【zh-CN.js】

组件注册

1、组件注册引用核心

import tinymce from 'tinymce/tinymce'; //tinymce核心文件
import Editor from '@tinymce/tinymce-vue';

2、Editor 初始化

tinymce.init({
   
  language_url: tinymce.addI18n("zh_CN", zh_CN), // 中文语言包路径
  language: "zh_CN",
  skin_url: "/src/assets/tinymce/skins/ui/oxide", // 编辑器皮肤样式
  content_css: "/src/assets/tinymce/skins/content/default/content.css",
  menubar: true, // 隐藏菜单栏
  autoresize_bottom_margin: 50,
  min_height: 350,
})

3、Editor 插件引入

// 插件依赖
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件
import "tinymce/plugins/link";
import "tinymce/plugins/code"