tinyMCE版本5.2.1中使用file_picker_callback回调函数自定义文件上传（当然包含图片上传）

最新推荐文章于 2023-05-09 11:22:38 发布
最新推荐文章于 2023-05-09 11:22:38 发布
阅读量6.2k 收藏 4
点赞数 1
分类专栏： 组件库 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/105603549
版权

熟读api

http://tinymce.ax-z.cn/

环境说明

jQuery+tinyMCE版本5.2.1，我引用的是tinymce.min.js而不是jQuery版本

准备工作

把这个图标弄出来
在plugins加入link
在toolbar加入link
在这里插入图片描述
如果有

	    link_list: [
	        { title: '预置链接1', value: 'http://www.tinymce.com' },
	        { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
	    ],
	    image_list: [
	        { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
	        { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
	    ],
	    image_class_list: [
	    { title: 'None', value: '' },
	    { title: 'Some class', value: 'class-name' }
	    ],

点开以后是这样的
在这里插入图片描述

如果没有上面那个配置的话，点开是这样
在这里插入图片描述

file_picker_callback情况

如果不想过滤文件上传的后缀，可以禁用input.setAttribute('accept', filetype);

	    //自定义文件选择器的回调内容
	    file_picker_callback: function (callback, value, meta) {
	        //文件分类
	        var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
	        //后端接收上传文件的地址
			var uploadTime = formatTime(new Date().getTime(),"Y-M-D");
	        var upurl="/keJiaoXingNong/UploadServlet"+"?uploadTime="+uploadTime;
	        //为不同插件指定文件类型及后端地址
//	        switch(meta.filetype){
//	            case 'image':
//	                filetype='.jpg, .jpeg, .png, .gif';
//	                upurl='upimg.php';
//	                break;
//	            case 'media':
//	                filetype='.mp3, .mp4';
//	                upurl='upfile.php';
//	                break;
//	            case 'file':
//	            default:
//	        }
	        //模拟出一个input用于添加本地文件
	        var input = document.createElement('input');
	            input.setAttribute('type', 'file');
//	            input.setAttribute('accept', filetype);
	        input.click();
	        input.onchange = function() {
	            var file = this.files[0];
	            var xhr, formData;
	            console.log(file.name);
	            xhr = new XMLHttpRequest();
	            xhr.withCredentials = false;
	            xhr.open('POST', upurl);
	            xhr.onload = function() {
	                var json;
	                if (xhr.status != 200) {
	                    failure('HTTP Error: ' + xhr.status);
	                    return;
	                }
	                json = JSON.parse(xhr.responseText);
	                console.log(json);
	                var fileUrl = "/keJiaoXingNong/"+json.filepath[0]
	                callback(fileUrl, { title: file.name });
	                
	                
//					console.log(data);
//					backData = JSON.parse(data);
//                        success(data.location);
//					var imgUrl = "/keJiaoXingNong/"+backData.filepath[0];
//					console.log(imgUrl);
	            };
	            formData = new FormData();
	            formData.append('file', file, file.name );
	            xhr.send(formData);
	        };
	    },

这个写法参考
http://tinymce.ax-z.cn/general/upload-images.php

在这里插入图片描述

我太懒了，没有改为jQuery的ajax

这里需要注意callback(fileUrl, { title: file.name });上门的参考写的是callback(fileUrl);你这么写的话，js会报错，少个参数，其实很简单

  • fileUrl：图片的地址
  • title：图片的名称
    你可以打印一下上面的file看一下

全部配置

	//初始化富文本编辑器
	tinymce.init({
	    selector: '#mytextarea',
	    //skin:'oxide-dark',
	    language:'zh_CN',
	    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize',
	    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
	    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
	    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
	    height: 650, //编辑器高度
	    min_height: 400,
	    /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
	        '/static/reset.css',
	        '/static/ax.css',
	        '/static/css.css',
	    ],*/
	    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;',
	    link_list: [
	        { title: '预置链接1', value: 'http://www.tinymce.com' },
	        { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
	    ],
	    image_list: [
	        { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
	        { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
	    ],
	    image_class_list: [
	    { title: 'None', value: '' },
	    { title: 'Some class', value: 'class-name' }
	    ],
	    importcss_append: true,
	    //自定义文件选择器的回调内容
	    file_picker_callback: function (callback, value, meta) {
	        //文件分类
	        var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
	        //后端接收上传文件的地址
			var uploadTime = formatTime(new Date().getTime(),"Y-M-D");
	        var upurl="/keJiaoXingNong/UploadServlet"+"?uploadTime="+uploadTime;
	        //为不同插件指定文件类型及后端地址
//	        switch(meta.filetype){
//	            case 'image':
//	                filetype='.jpg, .jpeg, .png, .gif';
//	                upurl='upimg.php';
//	                break;
//	            case 'media':
//	                filetype='.mp3, .mp4';
//	                upurl='upfile.php';
//	                break;
//	            case 'file':
//	            default:
//	        }
	        //模拟出一个input用于添加本地文件
	        var input = document.createElement('input');
	            input.setAttribute('type', 'file');
//	            input.setAttribute('accept', filetype);
	        input.click();
	        input.onchange = function() {
	            var file = this.files[0];
	            var xhr, formData;
	            console.log(file.name);
	            xhr = new XMLHttpRequest();
	            xhr.withCredentials = false;
	            xhr.open('POST', upurl);
	            xhr.onload = function() {
	                var json;
	                if (xhr.status != 200) {
	                    failure('HTTP Error: ' + xhr.status);
	                    return;
	                }
	                json = JSON.parse(xhr.responseText);
	                console.log(json);
	                var fileUrl = "/keJiaoXingNong/"+json.filepath[0]
	                callback(fileUrl, { title: file.name });
	                
	                
//					console.log(data);
//					backData = JSON.parse(data);
//                        success(data.location);
//					var imgUrl = "/keJiaoXingNong/"+backData.filepath[0];
//					console.log(imgUrl);
	            };
	            formData = new FormData();
	            formData.append('file', file, file.name );
	            xhr.send(formData);
	        };
	    },
//	    images_upload_base_path: '/keJiaoXingNong',
	    relative_urls : false,
    	remove_script_host : false,
	    images_upload_handler: function(blobInfo, success, failure) {
            var form = new FormData();
			var uploadTime = formatTime(new Date().getTime(),"Y-M-D");
            form.append('files', blobInfo.blob(), blobInfo.filename());
            $.ajax({
                    url: "/keJiaoXingNong/UploadServlet"+"?uploadTime="+uploadTime,
                    type: "post",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function(data) {
						console.log(data);
						backData = JSON.parse(data);
//                        success(data.location);
						var imgUrl = "/keJiaoXingNong/"+backData.filepath[0];
						console.log(imgUrl);
                        success(imgUrl);

                    },
                    error: function(e) {
                        alert("图片上传失败");
                    }
                });
         },
	    init_instance_callback : function(editor) {
	    	// 编辑器初始化完成以后的 
			layer.closeAll('loading');
	    },
	    autosave_ask_before_unload: false,
	});

如果仅仅需要图片上传，请看我写的另外一篇
https://blog.csdn.net/Gabriel_wei/article/details/105603314

Gabriel_wei
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tinymce6.0 image_upload_handler和file_picker_callback自定义上传图片报错的解决方案
峰会路转的博客
09-29 4520
点击源右边的上传按钮的方法没有变动：调用后给给的接口，把图片链接cb方法就可以了。tinymce6.0的写法。这个组件的核心源码如下。
tinymce 自定义多图片批量上传插件 附使用示范Test
06-22
本文将详细讲解如何为TinyMCE构建一个自定义的多图片批量上传插件，并提供一个使用示范。首先，我们需要理解TinyMCE的插件系统。TinyMCE的插件是由JavaScript编写的小型模块，它们可以插入到编辑器实例中，添加新的...
vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传
weixin_50644623的博客
08-10 9220
弄了好久...终于算是实现了吧....
2.项目开发
Fjtd_2019的博客
06-14 236
前言 本篇将记录整个项目开发中遇到的一些坑，以及学到的技术，本人技术有限，如有遇到不专业之处请多海涵。。。。 关于接口开放 前面有说到，本项目前端的数据是从从后台开放的接口取得，而目Guns框架是具备权限管理功能的，并且对接口的放行也做了权限管理，需要在系统中将不需要过滤的接口填入，才能请求到该接口。而目前最新版的框架也是将不需要过滤的url存在数据库的一张名为sys_config表中了 通过逗号将放行的接口隔开，即可完成放行操作。在刚接触到这个框架时，也是研究了好久，接口死活没法请求到，在项目中也是各种
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
weixin_39311719的博客
04-13 4069
在项目中的public文件夹中新建tinymce文件夹（因为我的项目是脚手架创建的，所以公共文件夹是public）；1. 最后两行是另外下载的插件（数学公式、导入word）,上面的二和三步的tinymce文件夹里面新建plugins文件夹，下载的两个插件就丢这里面;方法是在文件后面的方法中定义的，目的是验证上传的视频是否符合，验证通过定义了一个全局的遮罩loading，再调用定义的。：因为tinymce是英文版本的，所以要下载汉化包中文js，放到上面的tinymce文件夹中。1. 编辑器初始化中的“
TinyMCE自定义上传图片
12-04
在这个场景中，我们将重点讨论如何在TinyMCE中实现自定义图片上传功能。 首先，我们需要理解TinyMCE的插件系统。TinyMCE的插件是可插入到编辑器中的独立功能模块，它们通常包含JavaScript代码，用于扩展编辑器的...
blog.rar_blog_jsp个人博客_个人博客系统_图片 上传 浏览_图片上传 浏览
09-20
在这个“blog.rar”压缩包中，我们可以找到一个基于JSP（JavaServer Pages）技术构建的个人博客系统，其核心特性包括图片上传和浏览功能，这在现代博客系统中是非常重要的。 **1. JSP技术基础** JSP是Java的一种...
TinyMce 上传多图片组件（修改）.zip
11-28
2. **自定义配置**：然后，你需要在TinyMce的初始化配置中设置图片上传的参数，如URL、数据字段名、文件类型限制等。 3. **编写后端代码**：在服务器端，你需要编写处理文件上传的代码，这部分可能涉及到文件处理和...
在vue中封装tinymce5，带自定义按钮demo(包括视频，图片上传)
03-26
样式已经设计好，可以通过设置属性进入浏览模式...使用前先执行以下命令行 npm install tinymce@5.1.0 -S npm install @tinymce/tinymce-vue@3.0.1 -S more directiones(just read the following link)：in readMe.txt
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
TinyMCE 新增本地图片上传功能
09-05
在TinyMCE 在处理富文本时，可以通过网站的相对路径录入图片地址。
tinymce中文资源包zh_CN.js
06-28
tinymce富文本编辑器的中文资源包，只是个中文资源包，没有中文资源包，编辑器默认是英文，啊，是英文啊，英文不方便用户使用啊，所以要中文包啊
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
10-16
在这个例子中，我们使用layui的`upload`模块，配置了按钮元素ID、上传接口URL以及成功或失败的回调函数。当文件上传成功时，我们更新隐藏的`input`元素的值，使其包含图片的URL。 总的来说，layui提供了一套简洁而...
VUE使用富文本编辑器 Tinymce（踩坑记录）
qq_38265533的博客
05-09 2707
下面这一层工具栏是没法自动折叠的，需要再次点击省略号才可以折叠，在使用过程中体验不太好。因为是vue2所以选用v5版本选用v3的组件，其实说到底不同版本的Vue只不过一些细微的差异和版本不同，其大体都是差不多的。对比了其他富文本编辑器，tinymce是唯一一个从word复制过来的时候基本保持原有样式的富文本，这一点体验感非常好。tinymce文件夹，然后把node_modules下的tinymce下的skins文件夹复制粘贴到。2.将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。
tinymce上传图片php,图片&文件上传
weixin_34404599的博客
03-12 954
此页更新时间：2020-10-28 11:46配置选项列表：如要快速上手，可以阅读《简介与入门：上传图片和文件》这个章节，里面包含完整的上传代码示例。automatic_uploads开关使用Data URL/Blob URL插入图片和文件到内容区的方式。例如，图像是使用imagetools插件处理后插入到内容区的，此时图像并未真正上传到服务器，而是以Data URL/Blob URL的方式插入在...
tinymce 上传本地视频
小星落
05-26 7303
tinymce富文本编辑器的视频上传功能，发现默认只能填写视频链接，不能上传本地的视频 修改视频上传按钮 需要设置 file_picker_callback 在 tinymce.init 中添加 //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 file_picker_callback: function (callback, value, meta) { if (meta.filetype === 'file') { callback('
tinymce编辑器上传本地视频
Harrietjia的博客
05-06 1459
直接上代码： plugins和toolbar要加上 media，然后通过file_picker_callback和media_url_resolver进行处理 tinymce.init({ file_picker_callback: function(callback, value, meta) { //文件分类 var filetype = '.pdf, .jpg, .jpeg, .png, .gif,
tinymce移动端使用_使用 vConsole 进行移动端调试
最新发布
06-06
您可以按照以下步骤使用 vConsole 进行移动端调试： 1. 在您的 HTML 文件中引入 vConsole 的 JS 文件，例如： ```html <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> ``` 2. 在您的 JS 文件中初始化 vConsole，例如： ```javascript var vConsole = new VConsole(); ``` 3. 在移动设备上打开您的页面，此时 vConsole 将自动出现在页面底部。 4. 在 vConsole 中选择 Console 标签，您可以在此处查看 JavaScript 控制台的输出，也可以在此处输入 JavaScript 命令。 5. 在 vConsole 中选择 Network 标签，您可以在此处查看请求和响应的详细信息。 6. 在 vConsole 中选择 Element 标签，您可以在此处查看当前页面的 DOM 结构，并且可以在此处进行 DOM 元素的查看和编辑。 通过以上步骤，您可以在移动设备上方便地进行调试和排错。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值