vue-tinymce：富文本编辑器使用（安装-下载-引入-使用）

示例demo

下载安装

官方地址：
html使用地址： tiny中文文档 http://tinymce.ax-z.cn/integrations/integrate-index.php
vue3使用地址：vue-tinymce https://packy-tang.gitee.io/vue-tinymce/#/

已支持vue3。npm i @packy-tang/vue-tinymce@next 就可使用vue3版本支持。

vue命令安装

1.安装命令

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

2.main,js中引入

import Vue from "vue"
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.use(VueTinymce)

3.官网下载插件

https://www.tiny.cloud/get-tiny/self-hosted/
（1）下载社区版就可以

上面版本比较卡下载不下来的话，就下载下面版本的

4.引入本地插件包

解压压缩包，将tinymce\js中的tinymce放入public中。

5.引入js

在index.html中引入

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

6.使用

template

<vue-tinymce v-model="content" :setup="setup" :setting="setting" />

script 参考插件参考文档 tiny中文文档

setting: {
        menubar: false, // 指定哪些一级菜单显示，或调整菜单顺序
        // toolbar 指定工具栏上显示的按钮，使用空格分隔，用 | 分组。如要隐藏菜单栏，将其值设为false即可
        toolbar: "image | alignleft aligncenter alignright",
        plugins: "link image",
        images_upload_url: "", // 文件上传路径
        images_upload_base_path: "", // 如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。
        height: 300, // 编辑器高度
        language: "zh_CN", // 中文
        statusbar: false, // 显示隐藏状态栏
        branding: true, // 编辑器界面右下角的“Tiny”
        elementpath: false, // 设为false时，可隐藏底栏的元素路径
      },

7.结果

此文参考
vue本地引入TinyMCE富文本编辑器 https://blog.csdn.net/weixin_42029873/article/details/129062620