位置: IT常识 - 正文

vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传(vue3如何)

编辑:rootadmin
vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传 安装:我用的是tinymce最新版本v6npm install tinymce -Snpm install @tinymce/tinymce-vue -S

推荐整理分享vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传(vue3如何),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:tinymce-vue,vue3 key,vuetify 3,vue3怎么用,vue3+ts+vite,vue3编辑器,vuetify 3,vue3怎么用,内容如对您有帮助,希望把文章链接给更多的朋友!

2.安装语言包:Language Packages | Trusted Rich Text Editor | TinyMCE

3.在项目public文件夹下--新建tinymce文件夹,安装包解压在该文件夹下

 封装组件TEditor.vue

<template> <editor v-model="myValue" :init="init"></editor></template><script setup lang="ts">import { uploadImg } from "../api/module/new_news";//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/image"; // 插入上传图片插件import "tinymce/plugins/media"; // 插入视频插件import "tinymce/plugins/table"; // 插入表格插件import "tinymce/plugins/lists"; // 列表插件import "tinymce/plugins/wordcount"; // 字数统计插件import "tinymce/plugins/code"; // 源码import "tinymce/plugins/fullscreen"; //全屏import "tinymce/plugins/preview"; //预览// import 'tinymce/plugins/paste'; //粘贴插件import "tinymce/plugins/pagebreak"; //插入分页符import "tinymce/plugins/codesample";import "tinymce/plugins/searchreplace";import "tinymce/plugins/link";import "tinymce/plugins/autosave";import "tinymce/plugins/autolink";import "tinymce/plugins/anchor";import "/public/tinymce/plugins/axupimgs/plugin.js";// /// import "tinymce/plugins/fullpage";autolink anchor//接下来定义编辑器所需要的插件数据import { reactive, ref } from "vue";import { onMounted, defineEmits, watch } from "vue";// import axios from "axios";import request from "@/utils/axios";// import { updateImg } from "@/api/order/order";const emits = defineEmits(["getContent"]);//这里我选择将数据定义在props里面,方便在不同的页面也可以配置出不同的编辑器,当然也可以直接在组件中直接定义const props = defineProps({ value: { type: String, default: () => { return ""; }, }, baseUrl: { type: String, default: "", }, disabled: { type: Boolean, default: false, }, plugins: { type: [String, Array], // default: "lists image media table wordcount fullscreen", default: " wordcount table searchreplace preview pagebreak fullscreen codesample autosave autolink anchor autolink image media lists link code image axupimgs", }, toolbar: { type: [String, Array], default: " fontsize fontfamily bold italic lineheight underline alignleft aligncenter alignright alignjustify anchor | undo redo | formatselect | forecolor backcolor | bullist numlist outdent indent | lists link image axupimgs media table | removeformat | fullscreen|preview code codesample|searchreplace ", }, //必填 objId:{ type: Object, default: {}, }});// watch(()=>props.objId,(id,old)=>{// console.log(id,'xinid')// id=newId// })console.log(props.objId.newId,'++++++++++++++')//用于接收外部传递进来的富文本const myValue = ref(props.value);//定义一个对象 init初始化const init = reactive({ selector: "textarea", language_url: "/cms/tinymce/langs/zh_CN.js", // 语言包的路径,具体路径看自己的项目,文档后面附上中文js文件 language: "zh_CN", //语言 //自动聚焦 auto_focus: true, skin_url: "tinymce/skins/ui/oxide", // skin路径,具体路径看自己的项目 height: 800, //编辑器高度 width: "100%", branding: false, //是否禁用“Powered by TinyMCE” menubar: false, //顶部菜单栏显示 image_dimensions: false, //去除宽高属性 plugins: props.plugins, //这里的数据是在props里面就定义好了的 toolbar: props.toolbar, //这里的数据是在props里面就定义好了的 images_upload_url: "/news/picUpload", // paste_convert_word_fake_lists: true, // 插入word文档需要该属性 font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", font_family_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif", line_height_formats: "1 1.2 1.4 1.6 2", paste_webkit_styles: "all", paste_merge_formats: true, nonbreaking_force_tab: false, paste_auto_cleanup_on_paste: false, file_picker_types: "file image media", content_css: "tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入 // 文件上传 file_picker_callback: (callback, value, meta) => { //,,m4v,avi,wmv,rmvb,mov,mpg,mpeg,webm let filetype = ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4,.mkv, .avi,.wmv, .rmvb,.mov,.mpg,.mpeg,.webm, .jpg, .jpeg, .png, .gif"; //限制文件的上传类型 let inputElem = document.createElement("input"); //创建文件选择 inputElem.setAttribute("type", "file"); inputElem.setAttribute("accept", filetype); inputElem.click(); inputElem.onchange = () => { let upurl = ""; let file = inputElem.files[0]; //获取文件信息 const ph = import.meta.env.VITE_APP_IMAGE_URL; let params = new FormData(); if (file.type.slice(0, 5) == "video") { //判断文件类型 upurl = "/news/videoUpload"; params.append("file", file); params.append("id", props.objId.newId); } else if (file.type.slice(0, 5) == "image") { upurl = "/news/picUpload"; params.append("file", file); params.append("id", props.objId.newId); } else { upurl = "/news/attachUpload"; params.append("file", file); params.append("siteId", props.objId.siteId); params.append("newsId", props.objId.newId); params.append("attachDesc", ""); } if (file.type.slice(0, 5) == "image" && file.size / 1024 / 1024 > 2) { alert("上传失败,图片大小请控制在2M以内"); } else if ( file.type.slice(0, 5) == "video" && file.size / 1024 / 1024 > 500 ) { alert("上传失败,视频大小请控制在 500M 以内"); } else if (file.size / 1024 / 1024 > 10) { alert("上传失败,文件大小请控制在 10M 以内"); } else { let config = { headers: { "Content-Type": "multipart/form-data", }, }; request .post(upurl, params, config) .then((res) => { if (res.code == 200) { if (res.data.url) { callback(ph + res.data.url, { text: res.data.alt, title: res.data.name, }); } else { console.log(res); //上传成功,在回调函数里填入文件路径 callback(ph + res.data); } } else { alert("上传失败"); } }) .catch(() => { alert("上传出错,服务器开小差了呢"); }); } }; },});//监听外部传递进来的的数据变化watch( () => props.value, () => { myValue.value = props.value; emits("getContent", myValue.value); });//监听富文本中的数据变化watch( () => myValue.value, () => { emits("getContent", myValue.value); });//在onMounted中初始化编辑器onMounted(() => { tinymce.init({});});</script>

 上传图片

 上传附件

 上传视频

 最终效果如下图

批量上传图片实现

需要安装插件ax多图片批量上传插件 | TinyMCE中文文档中文手册

 注意:安装完以后放到最开始新建的tinymce文件夹下

vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传(vue3如何)

 但是在文件里引入的时候会有问题

 这里借鉴了在vuecli3.0+中使用tinymce及实现多图上传,文件上传,公式编辑等功能 - huihuihero - 博客园

为什么引入的是plugin.js是因为axupimgs中没有index.js文件,我试了一下写一个index.js 引入的时候还是会报错,具体的原因我也不大明白,(就是菜)..

不报错的引入方式,但是会有下面的提示要使用/tinymce/plugins/axupimgs/plugin.js这种方式,但是按照这个来就会报错

引入完以后最重要的就是去plugin.js文件修改一下路径哦!!!不然就会出现空白的情况

就是你们项目的地址

 

 插件安装好修改完以后其他的就很好实现了,直接看代码吧

多个图片上传主要是基于单个图片上传的,所以方法都是一样的,这里最重要的就是单张图片和多个图片回调传的参数不一样. 

最后看一下效果吧!

 

我也是第一次用这个编辑器,写的不好的地方,大佬们多指正 

本文链接地址:https://www.jiuchutong.com/zhishi/269889.html 转载请保留说明!

上一篇:为什么路由器经常断网?(为什么路由器经常断网)

下一篇:iPhone SE和华为P8 Max哪个好?(苹果se和华为p9哪个好)

  • 互联网创业成功的秘密,超级软文营销 (互联网创业成功的原因)

    互联网创业成功的秘密,超级软文营销 (互联网创业成功的原因)

  • iqoo8内存融合怎么开(iqoo8pro内存融合)

    iqoo8内存融合怎么开(iqoo8pro内存融合)

  • 小米手表color2支持微信支付吗(小米手表color2支持微信吗)

    小米手表color2支持微信支付吗(小米手表color2支持微信吗)

  • 小米6x充不进电激活方法(小米6x充不进电,背后有微电流声)

    小米6x充不进电激活方法(小米6x充不进电,背后有微电流声)

  • 直播里点亮是什么意思(直播里点亮是什么意思啊)

    直播里点亮是什么意思(直播里点亮是什么意思啊)

  • 腾讯会议怎么悬浮窗播放(腾讯会议怎么悬浮窗播放电脑)

    腾讯会议怎么悬浮窗播放(腾讯会议怎么悬浮窗播放电脑)

  • 对方微信变成null(对方微信变成灰色头像)

    对方微信变成null(对方微信变成灰色头像)

  • lga1151支持哪些cpu(lga1151支持哪些cpu 哪个cpu性价比)

    lga1151支持哪些cpu(lga1151支持哪些cpu 哪个cpu性价比)

  • 怎么压缩视频发微信(怎么压缩视频发送)

    怎么压缩视频发微信(怎么压缩视频发送)

  • soul被拉黑还能恢复吗(soul被拉黑还能看到对方在线)

    soul被拉黑还能恢复吗(soul被拉黑还能看到对方在线)

  • 知道qq密码怎么跳过手机验证(知道QQ密码怎么改手机号)

    知道qq密码怎么跳过手机验证(知道QQ密码怎么改手机号)

  • 电脑怎么彻底删除软件(电脑怎么彻底删除软件及卸载残留)

    电脑怎么彻底删除软件(电脑怎么彻底删除软件及卸载残留)

  • 拼多多能删除好友吗(拼多多能删除好评吗)

    拼多多能删除好友吗(拼多多能删除好评吗)

  • 小米手机sn码有几位(小米手机sn码有字母)

    小米手机sn码有几位(小米手机sn码有字母)

  • 苹果11系列屏幕大小对比(苹果11系列屏幕多少寸的)

    苹果11系列屏幕大小对比(苹果11系列屏幕多少寸的)

  • 华为nova5有没有超广角(华为Nova5有没有红外线)

    华为nova5有没有超广角(华为Nova5有没有红外线)

  • 探探是什么时候发布的(探探是什么时候火起来的)

    探探是什么时候发布的(探探是什么时候火起来的)

  • 手机分辨率怎么调(手机分辨率怎么算几k)

    手机分辨率怎么调(手机分辨率怎么算几k)

  • 小米平板复位孔在哪里(小米平板修复)

    小米平板复位孔在哪里(小米平板修复)

  • 小恩爱登录密码在哪里(小恩爱密码忘了手机号也换了怎么办)

    小恩爱登录密码在哪里(小恩爱密码忘了手机号也换了怎么办)

  • 华为相册图片更改顺序(华为手机更改相片存储位置)

    华为相册图片更改顺序(华为手机更改相片存储位置)

  • 华为p30处理器型号(华为p30的处理器是)

    华为p30处理器型号(华为p30的处理器是)

  • vue-router + element-plus实现面包屑导航栏和路由标签栏

    vue-router + element-plus实现面包屑导航栏和路由标签栏

  • 增值税发票认证平台进不去什么原因
  • 税收实体法和程序法分类
  • 委托合同有效吗
  • 维修费开具发票
  • 公司注销单位社保欠费怎么处理
  • 一般纳税人交的增值税能不能抵扣企业所得税
  • 发票开票地址是注册地址还是经营地址
  • 增值税纳税义务发生时间
  • 承付期满日怎么算
  • 应收账款入账金额的确定方法
  • 报销跨月还能报销吗
  • 餐饮管理公司设哪些科目
  • 个体工商户可以给自己交五险一金吗
  • 酒店优惠券财务如何记账?
  • 企业购入存货分录
  • 自然人税收管理扣缴端(原个税)申报实训
  • 被扣留的质保金怎么办
  • 对公账户资金往来会产生税吗
  • 递延收益摊销会计分录
  • 工资的结转
  • 苹果6手机蓝牙
  • 财务预算业务制度有哪些
  • 出口货物收汇核销流程
  • 增值税普通发票和电子普通发票的区别
  • 固定资产 出售
  • PHP:oci_set_client_identifier()的用法_Oracle函数
  • bootice.exe
  • PHP:Memcached::__construct()的用法_Memcached类
  • thinkphp uuid
  • 禁止扣除项目有什么
  • php中td
  • 利润分配弥补亏损会计分录
  • 会计政策变更常见例子
  • 银行贷款每个月都要还吗?
  • vue中的use
  • php解析原理
  • 元的解释是什么?
  • 机器学习--使用朴素贝叶斯进行垃圾邮件分类
  • 瀑布流实现方式
  • php中array用法
  • 承包安装工程
  • vmware workstation pro怎么卸载干净
  • 如何网上添加办税员上海
  • 销售不同商品的会计分录
  • 金税盘开票如何增加商品编码
  • 收到返利冲成本还是记收入
  • 房屋扩建后折旧费怎么算
  • 小规模差额征税可以开专票吗
  • sqlserver2008安装步骤图文
  • 银行存款余额调节表编制
  • 生产企业免抵退是什么意思
  • 增值税一般纳税人企业对同属于增值税
  • 开红字发票如何调整收入?
  • 销货清单和发票金额不一致
  • 收不回来的应收账款
  • 多计费用以前年度损益调整账务处理
  • 展览展示服务费计入什么科目
  • 用友为什么引入不了账套
  • 对方公司收钱不开发票怎么办
  • 银行承兑汇票托收凭证
  • mac mysql初始密码
  • mysql 5.7.33安装
  • bios怎么调高性能
  • windows 安装源
  • 本地磁盘文件系统
  • win8鼠标设置在哪
  • linux防火墙的主要内容
  • win10资源管理器启动不了
  • jquery文本框内容改变事件
  • perl 数组放入另一个数组
  • 探索世界怎么玩
  • windows 10一
  • node:js
  • jquery图片轮播无缝连接
  • 公职律师
  • 发票单位可以开一批吗?
  • 陕西税务局官网登录
  • 北京国税局开票流程
  • 纳税信用等级在哪里查
  • 盐城合作医疗在手机上怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设