使用框架及语言：vue3 + ts + ant design vue + vben admin

在vben admin框架中有封装使用 tinymce 且重写了上传组件，但是与项目要求的上传不一致，特记录使用中要注意的点以便下次遇到可以快速开始。
项目要求，使用tinymce 自定义上传插件使文件上传不是从本地上传，而是从已经做好的文件管理功能（已经上传到服务器中的文件）中选择上传。

项目中引入tinymce 及配置

安装

npm :
npm install @tinymce/tinymce-vue -S
npm install tinymce -S
yarn :
yarn add @tinymce/tinymce-vue
yarn add tinymce

在public目录下新建tinymce目录,将中文包和skins目录(node_modules->tinymce->skins)放到该目录

tinymce官网下载中文包

文件配置目录：

封装组件

Vben admin 框架自己有封装，我这里是把它封装的删掉之后用的根据网上找的来写得，没有封装的可以新建文件夹封装:

<template><div><editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId" /><FileModal @register="registerModal" @success="handleSuccess" :multiple="true" /><!--FileModal 是封装的文件管理组件  --></div>
</template><script setup lang="ts">//JS部分//在js中引入所需的主题和组件import tinymce from 'tinymce/tinymce';// import 'tinymce/skins/content/default/content.css'; //引入后全局页面样式收影响import Editor from '@tinymce/tinymce-vue';import 'tinymce/themes/silver';import 'tinymce/themes/silver/theme';import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标import 'tinymce/models/dom'; // 这里是个坑 一定要引入//在TinyMce.vue中接着引入相关插件import 'tinymce/icons/default/icons';import 'tinymce/plugins/table'; // 插入表格插件import 'tinymce/plugins/lists'; // 列表插件import 'tinymce/plugins/wordcount'; // 字数统计插件import 'tinymce/plugins/code'; // 源码import 'tinymce/plugins/codesample';import 'tinymce/plugins/fullscreen'; //全屏import 'tinymce/plugins/advlist'; //高级列表import 'tinymce/plugins/anchor'; //锚点import 'tinymce/plugins/autolink'; //自动链接import 'tinymce/plugins/charmap'; //特殊字符import 'tinymce/plugins/directionality'; //文字方向import 'tinymce/plugins/help'; //帮助import 'tinymce/plugins/importcss'; //引入cssimport 'tinymce/plugins/insertdatetime'; //插入日期时间import 'tinymce/plugins/nonbreaking'; //插入不间断空格import 'tinymce/plugins/pagebreak'; //插入分页符import 'tinymce/plugins/preview'; //预览import 'tinymce/plugins/quickbars'; //快速工具栏import 'tinymce/plugins/searchreplace'; //查找替换import 'tinymce/plugins/visualblocks'; //显示元素范围import 'tinymce/plugins/visualchars'; //显示不可见字符import 'tinymce/plugins/link'; //显示不可见字符//接下来定义编辑器所需要的插件数据import { reactive, ref } from 'vue';import { onMounted, defineEmits, watch } from '@vue/runtime-core';import axios from 'axios';import { getToken } from '/@/utils/auth';import { message } from 'ant-design-vue';import { getAppEnvConfig } from '/@/utils/env';import FileModal from '/@/attachment_web/views/FileModal/index.vue';import { getFileType } from '/@/utils/file/fileType';import { useModal } from '/@/components/Modal';const token = getToken();const { VITE_GLOB_API_URL } = getAppEnvConfig();// import { updateImg } from '@/api/order/order'const emits = defineEmits(['change']);// 文件选择框const [registerModal, { openModal, closeModal }] = useModal();let editors = ref<Nullable<Editor>>(null);//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义const props = defineProps({value: {type: String,default: () => {return '';},},baseUrl: {type: String,default: '',},disabled: {type: Boolean,default: false,},plugins: {type: [String, Array],default:'nonbreaking visualblocks visualchars pagebreak lists table code fullscreen anchor autolink charmap searchreplace preview insertdatetime help advlist directionality quickbars link codesample',}, //必填toolbar: {type: [String, Array],default: `undo redo |  bold italic underline strikethrough |formatselect fontselect fontsizeselect |alignleft aligncenter alignright alignjustify | bullist numlist outdent indent lists| Upload fullscreen | forecolor backcolor |searchreplace lineheight link table pagebreak code codesample anchor charmap preview insertdatetime quickbars removeformat  subscript superscript selectall`,}, //必填});//用于接收外部传递进来的富文本const myValue = ref(props.value);const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''));//定义一个对象 init初始化const htmlRoot = document.getElementById('htmlRoot');const isDark = htmlRoot?.getAttribute('data-theme') === 'dark';const init = reactive({selector: '#' + tinymceId.value, //富文本编辑器的id,language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件language: 'zh_CN', //语言skin_url: (isDark && '/tinymce/skins/ui/oxide-dark') || '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目promotion: false,custom_elements: 'style,html,head,body,title,meta', //允许自定义标签存在setup: function (editor) {// 注册icon 方法// editor.ui.registry.addIcon(//   'shopping-cart',//   `<svg viewBox="0 0 1024 1024" data-icon="shopping-cart" width="1.5em" height="1.5em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M922.9 701.9H327.4l29.9-60.9 496.8-.9c16.8 0 31.2-12 34.2-28.6l68.8-385.1c1.8-10.1-.9-20.5-7.5-28.4a34.99 34.99 0 0 0-26.6-12.5l-632-2.1-5.4-25.4c-3.4-16.2-18-28-34.6-28H96.5a35.3 35.3 0 1 0 0 70.6h125.9L246 312.8l58.1 281.3-74.8 122.1a34.96 34.96 0 0 0-3 36.8c6 11.9 18.1 19.4 31.5 19.4h62.8a102.43 102.43 0 0 0-20.6 61.7c0 56.6 46 102.6 102.6 102.6s102.6-46 102.6-102.6c0-22.3-7.4-44-20.6-61.7h161.1a102.43 102.43 0 0 0-20.6 61.7c0 56.6 46 102.6 102.6 102.6s102.6-46 102.6-102.6c0-22.3-7.4-44-20.6-61.7H923c19.4 0 35.3-15.8 35.3-35.3a35.42 35.42 0 0 0-35.4-35.2zM305.7 253l575.8 1.9-56.4 315.8-452.3.8L305.7 253zm96.9 612.7c-17.4 0-31.6-14.2-31.6-31.6 0-17.4 14.2-31.6 31.6-31.6s31.6 14.2 31.6 31.6a31.6 31.6 0 0 1-31.6 31.6zm325.1 0c-17.4 0-31.6-14.2-31.6-31.6 0-17.4 14.2-31.6 31.6-31.6s31.6 14.2 31.6 31.6a31.6 31.6 0 0 1-31.6 31.6z"></path></svg>`,// );// 注册一个自定义的按钮editor.ui.registry.addButton('Upload', {icon: `upload`,tooltip: '插入文件',onAction: function (_) {editors.value = editor;openModal(true);},});},height: 400, //编辑器高度menubar: true, //顶部菜单栏显示image_dimensions: false, //去除宽高属性plugins: props.plugins, //这里的数据是在props里面就定义好了的toolbar: props.toolbar, //这里的数据是在props里面就定义好了的toolbar_mode: 'sliding',fontsize_formats: '11px 12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',// paste_convert_word_fake_lists: false, // 插入word文档需要该属性paste_webkit_styles: 'all',paste_merge_formats: true,nonbreaking_force_tab: false,auto_focus: true,paste_auto_cleanup_on_paste: false,content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入branding: false, //tiny技术支持信息是否显示paste_data_images: false, //图片是否可粘贴});// 文件选择方法function handleSuccess(value) {const { urls } = value;let addvalue = ``;for (let i = 0; i < urls.length; i++) {if (getFileType(urls[i]) == 'picture') {addvalue += `<img width='360px' src='${VITE_GLOB_API_URL || ''}/xx/${urls[i]}'/>`;} else if (getFileType(urls[i]) == 'video') {addvalue += `<video controls ><source src='${VITE_GLOB_API_URL || ''}/xx/${urls[i]}' type="video/mp4" /></video>`;} else if (getFileType(urls[i]) == 'audio') {addvalue += `<audio controls style="width: 100%" src='${VITE_GLOB_API_URL || ''}/xx/${urls[i]}'></audio>`;} else {message.warning('暂不支持该类型文件上传，请重新选择', 2);}}editors.value.insertContent(addvalue || '');closeModal();}//监听外部传递进来的的数据变化watch(() => props.value,() => {myValue.value = props.value;emits('change', myValue.value);},);//监听富文本中的数据变化watch(() => myValue.value,() => {emits('change', myValue.value);},);//在onMounted中初始化编辑器onMounted(() => {tinymce.init({});});
</script>

使用：

h(Tinymce, {value: model[field],onChange: (value: string) => {model[field] = value;},})
// 这是在vben admin 框架中使用的版本

或者

<Tinymce :value="value" @onChange="onChange" />

以下记录在使用tinymce 中遇到的问题

1.自定义上传插件（按钮）

在 init 中自定义按钮，然后在toolbar 中将按钮引入，onAction中写对应需求方法即可

setup: function (editor) {// 注册一个自定义的按钮editor.ui.registry.addButton('Upload', {icon: `upload`,tooltip: '插入文件',onAction: function (_) {editors.value = editor;openModal(true);},});},

toolbar: {type: [String, Array],default: `Upload`,},

隐藏快速工具栏 quickbars

因为自定义了上传组件而光标处弹出的快速工具栏中的图片上传还是调用的本地上传，就要把它去掉，后面发现是引入了快速工具栏插件 quickbars ，解决办法就是不要引用它就好了！

  import 'tinymce/plugins/quickbars'; //快速工具栏

tinymce 使用及自定义上传插件相关推荐

ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
H5 编辑器 Tinymce之解决图片上传/粘贴
H5 编辑器 Tinymce之解决图片上传/粘贴 TinyMCE 5是一款功能强大且灵活的富文本编辑器,可以嵌入Web应用程序中. 1.在HTML代码中<head>标签中引入下边的代码块 ...
【VUE】Toast-UI/Editor工具实现图片自定义上传到服务器
Toast-UI/Editor工具实现图片自定义上传到服务器 author: jwensh date: 2021.06.17 文章目录 Toast-UI/Editor工具实现图片自定义上传到服务器所 ...
tinymce上传图片php,TinyMCE 图片和文件上传
file_browser_callback 这个选项允许你添加自己的文件或者图片浏览器到TinyMCE中,如果给这个选项设置了一个值,那么编辑器的菜单选项中会多出来一个insert/edit link ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
基于jQuery很牛X的批量上传插件
上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...
vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
jquery uploadify 多文件上传插件使用经验
2019独角兽企业重金招聘Python工程师标准>>> Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www ...

tinymce 使用及自定义上传插件