vue3+tinymce 富文本指定上传图片宽度并压缩

已于 2024-08-02 09:25:28 修改
阅读量1.2k 收藏 20
点赞数 18
文章标签： vue.js 前端 javascript
于 2024-04-29 10:46:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36710806/article/details/136496189
版权

初始化：     

  1. npm install npm install tinymce -S

  2. npm install @tinymce/tinymce-vue -S

  3. 下载完依赖包后，我们在根目录的public文件夹种新建 tinymce文件夹存放文件。在tinymce中新建langs文件夹把下载好的中文js文件放入，此处为中文语言包或者富文本皮肤

  4.  TinyMCE中文文档中文手册，

  5. 中文语言包下载 Language Packages | Trusted Rich Text Editor | TinyMCE

  6.  tinymce 插件使用可以下载至本地文件夹放入node_modules中

      7. 直接粘贴第三方网站内容，让图片自动存入自己的服务器，具体代码参考注释部分；从word，text等文件中直接粘贴图片，存入本地，和后端已商议存储方式，由于领导认为无需如此操作，后续工作未完成；有解决方案的朋友可以私信我

<template>

  <!-- 富文本 -->

  <div>

    <editor style="z-index: 5000" class="el-textarea__inner" v-model="content" :init="init"></editor>

  </div>

</template>

这里需要注意 tinymce-vue 和tinymce的版本，高版本的tinymce不兼容

"@tinymce/tinymce-vue": "^5.1.1","tinymce": "^5.10.9","vue": "^3.4.21"。

<script setup>

//引入tinymce编辑器

import Editor from "@tinymce/tinymce-vue";



//引入方式引入node_modules里的tinymce相关文件文件

import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器

import "tinymce/themes/silver"; //编辑器主题，不引入则报错

import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标



// 引入编辑器插件

import "tinymce/plugins/advlist"; //高级列表

import "tinymce/plugins/autolink"; //自动链接

import "tinymce/plugins/autosave"; //自动存稿

import "tinymce/plugins/charmap"; //特殊字符

import "tinymce/plugins/code"; //编辑源码

import "tinymce/plugins/codesample"; //代码示例

import "tinymce/plugins/directionality"; //文字方向

import "tinymce/plugins/emoticons"; //表情

import "tinymce/plugins/fullscreen"; //全屏

import "tinymce/plugins/help"; //帮助

import "tinymce/plugins/image"; //插入编辑图片

import "tinymce/plugins/importcss"; //引入css

import "tinymce/plugins/insertdatetime"; //插入日期时间

import "tinymce/plugins/link"; //超链接

import "tinymce/plugins/lists"; //列表插件

import "tinymce/plugins/media"; //插入编辑媒体

import "tinymce/plugins/nonbreaking"; //插入不间断空格

import "tinymce/plugins/pagebreak"; //插入分页符

import "tinymce/plugins/preview"; //预览

import "tinymce/plugins/save"; //保存

import "tinymce/plugins/searchreplace"; //查找替换

import "tinymce/plugins/table"; //表格

import "tinymce/plugins/template"; //内容模板

import "tinymce/plugins/visualchars"; //显示不可见字符

import "tinymce/plugins/wordcount"; //字数统计

import "tinymce/plugins/paste"; //粘贴复制

import "tinymce/plugins/letterspacing"; //字间距,此插件为非集成插件需要下载至本地




import { onMounted } from "vue";

import {compress, compressAccurately,imagetoCanvas,dataURLtoFile} from 'image-conversion';




const action = ref('/api/File/UploadFile')

const imgUrl = ref(import.meta.env.VITE_APP_BASE_API)

import { copyUploadImg,fileUrlConvert } from "@/api/file";



const content = defineModel('content')

const props =  defineProps({
   showImageVideo:{
      type: [Boolean, String],
      default:true
   },     
 })



  let plug = "preview searchreplace autolink directionality visualchars fullscreen link template paste letterspacing code codesample table charmap  pagebreak nonbreaking insertdatetime advlist lists wordcount autosave "



  let bar = "fullscreen undo redo restoredraft | cut copy pastetext | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify outdent indent | \

                  styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \

                  table charmap emoticons pagebreak insertdatetime  preview | code selectall | indent2em lineheight letterspacing formatpainter axupimgs paste "

  let barImg = "image  media "



  const plugins = ref(props.showImageVideo? plug+barImg : plug)

  const toolbar = ref(props.showImageVideo? bar+barImg : bar)

  const newImgUrl = ref([])

  const init = ref({

        language_url: import.meta.env.VITE_BASE_URL+'tinymce/langs/zh_CN.js', //引入语言包文件

        language: "zh_CN",

        skin_url: import.meta.env.VITE_BASE_URL+ 'tinymce/skins/ui/oxide', //皮肤：浅色

        content_css:import.meta.env.VITE_BASE_URL + "tinymce/skins/content/default/content.css",

        min_height: 350,

        max_height: 770,

        toolbar_mode: "wrap",

        plugins: plugins,

        toolbar: toolbar,

        content_style: "p {margin: 5px 0;}",

        fontsize_formats: "12px 14px 16px 18px 24px 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;",

        branding: false,

        paste_webkit_styles:"all",

        paste_data_images: false,

        paste_as_text: props.showImageVideo? false : true,

        promotion: false,

        images_upload_handler: async function (blobInfo, succFun, failFun) {

          console.log('上传数据',blobInfo,blobInfo.blob())

          let fileBlob = blobInfo.blob()  

          const comSize = Math.ceil(fileBlob.size/1024) > 500? 500 : Math.ceil(fileBlob.size/1024)

          console.log('fileName',fileBlob.name,fileBlob.size)

          const img = new Image();  

          img.src =  blobInfo.blobUri();

          img.onload=function(){

            console.log('img',img.width,img.height,Math.ceil(750*img.height/img.width))

            // 配置绘制选项

            const options = {

                width: 750, // 设置目标宽度为800px

                height:Math.ceil(750*img.height/img.width),

                quality: 0.8,

            };

            // 开始绘制

            imagetoCanvas(img, options)

            .then((canvas) => {

              canvas.toBlob((blob)=>{

                //开始压缩

                compressAccurately(blob,comSize).then((blob)=>{

                  const file = new File([blob], fileBlob.name, { type: fileBlob.type });  

                  console.log('file',file)

                  let formData = new FormData();

                  formData.append("formFile", file);

                  copyUploadImg(formData).then(res=>{

                    let location = imgUrl.value + res.altertiveFilePath;

                    succFun(location);

                  }).catch()

                }).catch((error)=>{})

              })

            })

            .catch((error) => {

                console.error('绘制失败', error)

            });

          }  
         
        },

        // paste_preprocess: async function(plugin, args) {

        //   const images = args.content.match(/<img[^>]+/g);

        //   console.log('所有的img标签:', images);

        //   if (images) {

        //     args.content = images.forEach((item) => {

        //       const srcMatch = item.match(/src="([^"]+)"/);

        //       console.log('上传地址',srcMatch)

        //       if (srcMatch) {

        //         const src = srcMatch[1];

        //         let params = {

        //           'fileUrlList':[src]

        //         }

        //         fileUrlConvert(params).then((res)=>{

        //           console.log('返回的路径',res[0].convertUrl)

        //           const newSrc = imgUrl.value+ res[0].originalUrl;

        //           item = item.replace(/src="([^"]+)"/g, `src="${newSrc}"`); // 替换图片链接

        //           return item;

        //         }).catch()   

        //       }

        //     });

        //   }

        // },


        // init_instance_callback: (editor) => {

        // // 粘贴远程图片本地化

        // editor.on('paste', (e) => {

        //   let remoteImages = [];

        //   const doc = editor.getDoc();

        //   const imgTags = doc.getElementsByTagName('img');



        //   if(imgTags.length) {

        //       for (let img of imgTags) {

        //           var src = img.getAttribute('_src') || img.src || '';

        //           if (/^(https?|ftp):/img.test(src) && !test(src)) {

        //               remoteImages.push(src);

        //           }

        //       }

        //   }

        //   console.log('remoteImages',remoteImages)

        //   if (remoteImages.length) {

        //       // 需要上传的图片

        //       fileUrlConvert({'fileUrlList':remoteImages}).then((data)=>{

        //         console.log('返回路径',data)

        //         let i, o, item, res, _src, __src, list = data;

        //         for (i = 0; item = imgTags[i++];) {

        //             _src = item.getAttribute('_src') || item.src || '';

        //             for (o = 0; res = list[o++];) {

        //                 if (_src == res.originalUrl && res.convertUrl) {// 抓取失败时不做替换处理

        //                     __src = res.url;

        //                     replaceImage(item, res); // 使用下面的新方法

        //                     const replaceImage = (image = item, data = res) => {

        //                         let src = editor.convertURL(data.url, 'src');

        //                         let attr = {

        //                             'src': data.url,

        //                             'data-app': data.app,

        //                             'data-aid': data.aid

        //                         };

        //                         if(data.db) {

        //                             attr['data-db'] = data.db;

        //                         } else {

        //                             attr['data-width'] = data.width;

        //                             attr['data-height'] = data.height;

        //                         }

        //                         replaceUrlInUndoStack(image.src, data.url);

        //                         editor.$(image).attr(attr).removeAttr('alt').removeAttr('data-mce-src');

        //                       }

        //                     break;

        //                 }

        //             }

        //         }

        //         // 同步到textarea

        //         editor.save();

        //       }).catch()

        //     }

        //   })

        // }

      })



  // // 设置白名单域名

  // const localDomains = ['cfyun.cc', 'cfyun.top'];



  // // 检测是否需要上传

  // const test = function test(url) {

  //     if (url.indexOf(location.host) !== -1 || /(^\.)|(^\/)/.test(url)) {

  //         return !0;

  //     }

  //     // 白名单

  //     if (localDomains) {

  //         for (let domain in localDomains) {

  //             if (localDomains.hasOwnProperty(domain) && url.indexOf(localDomains[domain]) !== -1) {

  //                 return !0;

  //             }

  //         }

  //     }

  //     return !1;

  // }




  // const each = function (xs, f) {

  //     for (var i = 0, len = xs.length; i < len; i++) {

  //         var x = xs[i];

  //         f(x, i);

  //     }

  // };

  // const map = function (xs, f) {

  //     var len = xs.length;

  //     var r = new Array(len);

  //     for (var i = 0; i < len; i++) {

  //         var x = xs[i];

  //         r[i] = f(x, i);

  //     }

  //     return r;

  // };



  // const replaceString = function (content, search, replace) {

  //     let index = 0;

  //     do {

  //         index = content.indexOf(search, index);

  //         if (index !== -1) {

  //             content = content.substring(0, index) + replace + content.substr(index + search.length);

  //             index += replace.length - search.length + 1;

  //         }

  //     } while (index !== -1);

  //     return content;

  // };



  // const replaceImageUrl = function (content, targetUrl, replacementUrl) {

  //   let replacementString = 'src="' + replacementUrl + '"' + (replacementUrl === 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' ? ' data-placeholder="1"' : '');

  //   content = replaceString(content, 'src="' + targetUrl + '"', replacementString);

  //   return content;

  // };



  // const replaceUrlInUndoStack = function (targetUrl, replacementUrl) {

  //   each(editor.undoManager.data, function (level) {

  //       if (level.type === 'fragmented') {

  //           level.fragments = map(level.fragments, function (fragment) {

  //               return replaceImageUrl(fragment, targetUrl, replacementUrl);

  //           });

  //       } else {

  //           level.content = replaceImageUrl(level.content, targetUrl, replacementUrl);

  //       }

  //   });

  // };


</script>

Azureuuuuu
关注
vue3 + tinymce
TaylorY的博客
05-05 311
vue3 + tinymce
在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片
热门推荐
vip.khan的博客
04-26 4万+
1.安装 # npm install tinymce -S 2.把node_modules\tinymce里面的文件包括tinymce文件夹全部复制到static文件夹下面，如下图 3.在mian.js中引入tinymce（也可以在组件中引入） import Tinymce from 'tinymce' Vue.prototype.$tinymce = Tinymce...
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
tinymce 限制上传图片宽高，大小
将小宁的博客
07-01 5174
第一：设置全局统一样式；第二：通过paste插件进行拦截处理
Vue3使用vue-quill富文本编辑器实现图片大小调整
最新发布
T3165919332的博客
09-25 562
【代码】Vue3使用vue-quill富文本编辑器实现图片大小调整。
vue3中tinymce5.1.1基础配置、使用api-key、上传图片、自定义按钮
weixin_45803990的博客
04-09 2058
vue3中tinymce5.1.1基础配置、使用api-key、上传图片、自定义按钮
tinymce 上传本地视频
小星落
05-26 7744
tinymce富文本编辑器的视频上传功能，发现默认只能填写视频链接，不能上传本地的视频 修改视频上传按钮 需要设置 file_picker_callback 在 tinymce.init 中添加 //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 file_picker_callback: function (callback, value, meta) { if (meta.filetype === 'file') { callback('
设置tinymce富文本编辑器上传图片后最大宽度为100% 并保持图片横纵比
weixin_42038613的博客
09-22 2047
tinymce富文本编辑器在图片上传完成后，插件默认设置的是图片的固定宽高，这样在移动端显示的时候就会出现横向滚动条，体验非常不好，现在想要的结果是上传后默认设置宽度100%，高度自动。
vue3 中使用 TinyMCE 富文本编辑器
qq_40893035的博客
03-05 3560
找到官网，找到下载vue版本的地址上执行下载命令，将官网上的实例代码复制粘贴上去注册账号，获取免费的API-key汉化优化组件行为动作，比如上传图片。
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key...
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
vue图片上传压缩
10-18
在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克： 低网速下上传进度缓慢，用户体验差 高并发下，后台处理较大的上传文件压力大 或许有更多...
vue图片等比例上传压缩
10-18
在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克： 低网速下上传进度缓慢，用户体验差 高并发下，后台处理较大的上传文件压力大 或许有更多...
Vue3中使用TinyMce编辑器
qq_46083602的博客
03-12 1062
在打包过程中遇到了TinyMce样式未打包进去，线上部署后加载不出来，后面将样式文件放入public目录下载，页面重新引入，最后打包成功。
vue 图片上传压缩（vue+Vant+image-compressor）
codingLeader的博客
03-07 6908
vue 图片上传压缩（vue+Vant+image-compressor）
vue 图片上传并压缩
大哼的小世界
08-24 1200
<template> <div id="vue-img-uploader"> <input type="file" accept="image/*" :id="componentId" @change="getFile"> <template v-if="files.length>0"> <div class="vue..
vue上传图片并压缩
qq_31001061的博客
05-12 1101
需求：点击用户头像选择本地图片压缩上传到服务器 这里用vant UI组件的Uploader 文件上传 按需加载Uploader import {Uploader} from 'vant'; Vue.use(Uploader) 在dom上 <van-uploader :after-read="updateFile" accept="image/jpg" :max-size="10485760" @oversize="fileMax"> <img :src="..
vue图片压缩上传
sunddy_x的博客
03-16 8744
前言 之前图片压缩是公司前辈留下的一个js方法，采用的回调函数处理。最近一个项目为了优化用户体验，在图片上传失败后要根据接口返回的状态值更改页面UI，此时该js方法就会出现异常，于是我找到了 image-conversion。 安装 npm i image-conversion --save 或者 yarn add image-conversion 引入 import * as imageConversion from 'image-conversion' 或者 import {compress, c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值