TinyMCE实现word上传

1、引入

import "tinymce-plugin/plugins/tpImportword/plugin.js";

注:需要引入tinymce-plugin   npm install tinymce-plugin@0.0.3-beta.22 -S

或者

import "tinymce/plugins/importword";

前者比后者更好兼容了word样式。


2、在word导入完如果word是图文类型的,图片上传需要用base64 转化成blob再走后端接口

images_upload_handler:async (blobInfo, success, failure) => {
     console.log("blobInfo",blobInfo)
     if(blobInfo.base64 && blobInfo.base64()) { // 有base64时,通过base64转文件流上传,接口支持
         this.filePicBlob = 
         this.base64toFile(
            'data:'+ blobInfo.blob().type + ";base64," + blobInfo.base64(),
            'xxx');
      } else { // 没有base64时,用blob,接口支持
                          
            this.filePicBlob = blobInfo.blob();
     }
     if(blobInfo.blob().size / 1024 / 1024 > 10){
            failure("上传失败,图片大小请控制在 10M 以内")
     } else {
        你的接口
     }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现Word文档上传并展示在TinyMCE富文本里,可以按照以下步骤进行: 1. 通过TinyMCE的file_picker_callback选项设置一个回调函数,在这个函数中可以打开一个文件选择对话框,让用户选择要上传Word文档。 2. 当用户选择好要上传Word文档后,可以通过Ajax把文件上传到服务器上,上传成功后服务器返回一个文件的URL。 3. 在回调函数中,可以把上传成功后返回的URL插入到富文本编辑器中,这样就可以在编辑器里边展示Word文档了。 下面是一个简单的示例代码,用于演示如何实现Word文档上传和展示: ```javascript tinymce.init({ selector: 'textarea', plugins: 'filemanager', file_picker_types: 'file', // 限定文件选择器只能选择文件 file_picker_callback: function(callback, value, meta) { // 打开文件选择对话框,让用户选择要上传Word文档 openFilePicker(function(file) { // 通过Ajax把文件上传到服务器上 uploadFile(file, function(url) { // 把上传成功后返回的URL插入到富文本编辑器中 callback(url); }); }); } }); function openFilePicker(callback) { // 打开文件选择对话框,让用户选择要上传Word文档 // 这里使用了一个第三方的文件选择器插件,可以根据实际情况自行选择 filemanager.open(function(files) { if (files.length > 0) { callback(files[0]); } }); } function uploadFile(file, callback) { // 通过Ajax把文件上传到服务器上 // 这里假设上传成功后服务器返回一个文件的URL $.ajax({ url: '/upload', type: 'POST', data: file, success: function(url) { callback(url); } }); } ``` 在这个示例代码中,我们通过设置file_picker_callback选项来设置一个回调函数,在这个函数中打开一个文件选择对话框,让用户选择要上传Word文档。当用户选择好要上传的文件后,我们通过Ajax把文件上传到服务器上,并在上传成功后把返回的URL插入到富文本编辑器中。这样就实现Word文档上传并展示在TinyMCE富文本里边的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值