【Vue3】tinymce富文本编辑器的使用

最新推荐文章于 2025-11-13 17:55:14 发布

原创

最新推荐文章于 2025-11-13 17:55:14 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

TinyMCE是一个强大的开源富文本编辑器，支持多种插件和自定义配置。本文介绍了如何在Vue项目中安装、封装TinyMCE组件，包括下载、引入语言包以及设置各种功能如图片和文件上传。同时，展示了如何实现与Vue的数据双向绑定。

1.简介

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

TinyMCE的优势：

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

tinyMCE中文文档

2.使用

2.1 下载

npm install tinymce @tinymce/tinymce-vue -S

然后把node_modules/tinymec下的skins文件夹复制到public文件夹下
最后下载语言包，把里面的zh_CN.js也放进
中文包下载地址

在这里插入图片描述

2.2 封装组件

//TEditor.vue
<template>
  <editor v-model="content" tag-name="div" :init="init" />
</template>

<script lang="ts">
import {
   
    upload } from "../api/upload";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
//根据需要引入
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";//插入表格
import "tinymce/plugins/autoresize";
import "tinymce/plugins/autosave";
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //查看源码
import "tinymce/plugins/codesample"; //插入代码1
import "tinymce/plugins/directionality"; //
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/image"; //图片
import "tinymce/plugins/imagetools"; //图片工具
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/media"; //媒体插入
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/quickbars"; //快捷菜单
import "tinymce/plugins/searchreplace";