如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能

相关文档

本文部分内容借鉴：

tinymce中文文档：

安装tinymce

1、安装相关依赖

2、汉化编辑器前往此地址下载中文汉化包：

在项目public文件夹下新建tinymce文件夹，将下载后的压缩包解压至此文件夹另将node_modules/tinymce/skins文件夹也复制到public/tinymce里

3、封装组件:在src/components下新建teditor.vue，并写入以下代码

注册及使用组件

注：单图上传插件调用接口不同,上传图片和上传文件的两个函数都有调用，所以上传文件函数里也要添加对图片上传的判断和处理

表情插件无法成功加载

出现如下报错，是因为引入路径出问题，引入不到文件包导致的，需要自己配置路径

解决方法

1、将node_modules/tinymce/plugins/emoticons文件夹复制到public/tinymce里

2、在如上代码里的init里添加一行代码emoticons_database_url:'/tinymce/emoticons/js/emojis.js'，见图

3、在如上代码里的plugins和toolbars里分别添加emoticons来引入表情插件，见图

4、刷新或重启项目即可

添加首行缩进功能

参考文档：

格式刷

方法和首行缩进功能一样

解决css引入报警告的问题

解决

实现多图上传功能

参考文档：

添加文件上传以及媒体上传功能（上传功能包括图片上传，文件上传以及媒体上传三类。其中图片上传使用图片上传函数，文件和媒体上传均使用文件上传函数）

参考文档：

集成公式编辑功能

假如你的项目需要公式编辑功能

实现步骤

1、前往此地址下载ueditor包： https://files.cnblogs.com/files/huihuihero/ueditor.zip

2、将解压后的包复制到public文件夹下，与tinymce文件夹同级

3、创建公式编辑的插件

参考文档：

4、引入自制的公式编辑插件formulas

5、重启项目，公式编辑功能开发完成

最近新建一个项目,在@tinymce/tinymce-vue版本为4.0.0+的时候，会出现以下报错。因此出现报错的同学，建议使用4.0.0之前的版本号，如下（成功解决报错）

以上就是在vue3.0+中使用tinymce及实现多图上传，文件上传，公式编辑等功能的详细内容，更多关于vue实现多图上传文件上传公式编辑的资料请关注其它相关文章！