精华内容
下载资源
问答
  • tinyMCE上传图片

    万次阅读 2018-07-29 11:36:34
    最近做项目涉及到上传文件,于是便想用tinyMCE的文本编辑器,官网地址如下 tinyMCE官网地址 我比较了几个编辑器,最终选用这个,因为功能比较强大,能够实现代码编写,图片上传,插入连接等功能。今天就来说说图片...

    最近做项目涉及到上传文件,于是便想用tinyMCE的文本编辑器,官网地址如下

    tinyMCE官网地址

    我比较了几个编辑器,最终选用这个,因为功能比较强大,能够实现代码编写,图片上传,插入连接等功能。今天就来说说图片上传。(本地图片上传)

    一: 大致介绍

    我们的需求是允许用户在文章编写过程中插入图片并将图片保存到服务器下的一个文件夹(WEBROOT/upImage)。

    最终效果是这样的,如图

    点击工具栏的图片按钮,弹出如图的模态框:

    普通: 插入网站的图片

    上传: 插入本地图片

    插入图片后tinyMCE会把图片转换为img标签,比如我这里插入一个图片,tinyMCE转换后长成这样:

    <img src="../uploadImage/fec76649e2354069b0f2fe50e8205e9d.jpeg" alt="照片" width="307" height="425" />

    src——地址中的内容

    alt——图片描述的内容

    width,height——大小中的内容

    大致介绍完毕之后,我们说说具体该怎么做吧(是不是废话有点多,请见谅啦(*^▽^*))

    二: tinyMCE图片上传的原理

    (对不起,现在还不是实现,请耐心等待,把tinyMCE本地图片上传的原理看完再向下看哦,如果你知道这个,可以直接看实现,Thanks♪(・ω・)ノ)

    我在网上没有找到tinyMCE的汉化文档,所以都是一下内容均来自tinyMCE的官网,因为我英语水平还是有点渣,所以我会简单翻译关键部分,并把原文的内容贴出来,如果哪里有不对的地方欢迎指正。(*`∀´*)ノ亻!

    tinyMCE上传图片(官网上传图片的地址)

    1. 版本问题

    Please note, this image upload feature is available for TinyMCE version 4.3 and above. 

    (上传图片功能从4.3开始)

    2. 异步上传

    Local images can be uploaded to TinyMCE through the use of the new editor.uploadImages() function. This functionality is handled asynchronously, meaning that it is possible for users to save their content before all images have completed uploading. If this occurs, no server path to the remote image will be available and the images will be stored as Base 64.

    To avoid this situation, it is recommended that the editor.uploadImages() function be executed prior to submitting the editor contents to the server. Once all images have been uploaded, a success callback can be utilized to execute code. This success callback can be used to save the editor's content to the server through a POST.

    (上传图片的功能异步实现)

    3. 上传图片的处理

    If the default behavior of TinyMCE's image upload logic is not right for you, you may set your own behavior by using the images_upload_handler configuration property.

    Please note that while using this option, other image uploader options are not necessary. 

    (如果你不喜欢默认的图片上传,可以自己通过images_upload_handler控制图片上传的行为。但是如果使用这个选项,别的上传选项不再需要)

    好了,说完官网的关键步骤,我们来看一下实现思路是什么样的。

    首先,我要确保我的版本能够图片上传。

    其次, 关于异步。也就是说,图片上传比较耗时间,所以为了保证用户上传文件到服务器用时最短,所以一般在插入图片的时候就将图片上传到服务器,而不是在点击“提交”按钮的时候和文章其他内容一起上传。

    最后,通过images_upload_handler属性,实现图片的异步上传。

    三、 实现(下面进入正文了,|* ̄▽ ̄*))

    这里用的是ssm,java实现的,官网给的是php的例子。我是按照官网仿写的,官网链接

    官网例子

    不知道java+ssm怎么实现的可以向下看了((✿◡‿◡))

    1. 引入文件

    <script 
           	src="${pageContext.request.contextPath}/tinymce/js/tinymce/tinymce.min.js"></script>
       	<script 
        	src="${pageContext.request.contextPath}/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
        <script 
        	src="${pageContext.request.contextPath}/tinymce/js/tinymce/langs/zh_CN.js"></script>

    2. 前台images_upload_handler属性设置

    images_upload_handler: function(blobInfo, success, failure){
                     var xhr, formData;
                     var stuId = ${user.userId};
                     var maxLogId = ${maxLogId};
                     xhr = new XMLHttpRequest();
                     xhr.withCredentials = false;
                     xhr.open("POST", "${pageContext.request.contextPath}/utilController/uploadImage?stuId="+stuId+"&maxLogId="+maxLogId);
                     formData = new FormData();
                     formData.append("file", blobInfo.blob());
                     xhr.onload = function(e){
                            var json;
    
                            if (xhr.status != 200) {
                                failure('HTTP Error: ' + xhr.status);
                                return;
                            }
                             json = JSON.parse(this.responseText);
    
                            if (!json || typeof json.location != 'string') {
                                failure('Invalid JSON: ' + xhr.responseText);
                                 return;
                            }
                            success(json.location);
                     };
                     xhr.send(formData);
                }

     

    这里做一下说明。

    function(blobInfo, success, failure)

    blobInfo——插入的图片信息

    success——成功的回调函数

    failure——失败的回调函数

    这里居然用的是xmlhttlrequest,看到的时候我根本没有用过这个(原谅小白才疏学浅啊)一般都是用json前后台交互啊。所以如果对xmlhttprequest也陌生的同学们,可以跳转到以下链接看一看,我这里就不细说了

    xmlhttprequest的中文文档

    (其实这里我一直有个疑问,可不可以不用xmlhttprequest,用json实现呢)

    3. 后台处理

    这就是纯图片上传的代码了

    controller

    @RequestMapping("utilController")
    @Controller
    public class UtilController {
    	/**
    	 上传图片 
    	* @Title: uploadImage 
    	* @Description: 上传图片 
    	* @param image 要上传的图片
    	* @param request
    	* @return Map<String, Object> location(图片要上传的位置)
    	* @throws
    	 */
    	@RequestMapping("/uploadImage")
    	public @ResponseBody Map<String, Object> uploadImage( @RequestParam("file") MultipartFile file,
    			HttpServletRequest request) throws Exception {
    		Map<String, Object> ret = new HashMap<>();
    		
    		String realPath = request.getSession().getServletContext().getRealPath("/"); //获得真实路径
    		String stuId = request.getParameter("stuId");//获得学号
    		Integer maxLogId = Integer.parseInt(request.getParameter("maxLogId")); // 获得最大的日志编号
    		Integer logId = maxLogId+1;//当前日志编号
    		String location = ImageUtil.uploadImage(file, realPath, stuId, logId);
    		
    		ret.put("location", location);
    		
    		return ret;
    	}

    ImageUtil

    /**
    	 上传图片 ,将图片上传到 uploadImage/log/stuId/文件加下
    	* @Title: uploadImage 
    	* @Description: 上传图片 ,将图片上传到 uploadImage/log/stuId/文件加下
    	* @param image 要上传的图片
    	* @param basePath 基础路径
    	* @param stuId 上传者的学号
    	* @param logId 当前日志编号
    	* @param request
    	* @return String (图片要上传的位置)
    	* @throws
    	 */
    	public static String uploadImage(MultipartFile image, String basePath, String stuId, Integer logId) throws Exception{
    		String ret = "";
    		
    		//生成uuid作为文件名称
    		String uuid = UUID.randomUUID().toString().replaceAll("-", "");
    		//获得文件类型,如果不是图片,禁止上传
    		String contentType = image.getContentType();
    		//获得文件的后缀名
    		String suffixName = contentType.substring(contentType.indexOf("/")+1);
    		//得到文件名
    		String imageName = uuid+"."+suffixName;
    		//获取文件夹路径
    		String direPath = basePath+"uploadImage\\log\\"+stuId+"\\"+logId.toString();
    		File direFile = new File(direPath);
    		//文件夹如果不存在,新建文件夹
    		if(direFile.exists() == false || direFile.isDirectory() == false){
    			direFile.mkdir();
    		}
    		//得到文件路径
    		String path = direPath+"\\"+imageName;
    		
    		image.transferTo(new File(path));
    		
    		ret="/Test/uploadImage/log/"+stuId+"/"+logId.toString()+"/"+imageName;
    		
    		return ret;
    	}

     

    4. 因为上传文件,所以请自行配置xml

    最后,

    让我们开启tinyMCE之旅吧!!!

    展开全文
  • TinyMCE刚开始用的时候觉得界面不错就用了,但是图片上传要写地址,女朋友说太麻烦,所以后来就改了一下,下面说一下整体步骤,后台程序用的是 flask框架【事前准备】注册一个七牛账号,用来存放图片1.TinyMCE的初始...

    TinyMCE刚开始用的时候觉得界面不错就用了,但是图片上传要写地址,女朋友说太麻烦,所以后来就改了一下,下面说一下整体步骤,后台程序用的是 flask框架

    【事前准备】注册一个七牛账号,用来存放图片

    1.TinyMCE的初始化配置,我写了一个js文件,文件名 tinymce_setup.js 直接引入到网页

    bVbCVh9

    上图 plugins 、toolbar 这两个里面都有 image,必须要有

    images_upload_url 这个选项也是必须配置的,后面的值就是服务器处理上传图片的路径

    2. 网页引入 tinymce.min.js 和我们自己写的初始化js

    bVbCVih

    3.后端接收图片处理,我用的是python的flask框架写的,其他框架应该大同小异,我这里只是处理一张图片

    bVbCVii

    今天有个老哥问我,多张图怎么处理,我这里只能上传一张图,多图的没研究,多图的后台处理略有不同,我百度了一下,可以用 getlist这个方法把图片都获取到,有多图上传需求的朋友可以试试

    bVbCVil

    展开全文
  • 一、上传图片到七牛云 1.安装图片上传以及图片批量上传插件 import "tinymce/plugins/image"; import "tinymce/plugins/axupimgs"; 2.在toolbar和plugins中使用这两个插件,使用自定义图片上传方法 plug...
    此文基于之前博文vue使用tinymce5富文本编辑器
    图片批量上传插件来自Tinymce5 ax多图片批量上传插件

    一、上传图片到七牛云

    1.安装图片上传以及图片批量上传插件

    import "tinymce/plugins/image";
    import "tinymce/plugins/axupimgs";
    

    2.在toolbar和plugins中使用这两个插件,使用自定义图片上传方法

    plugins:"image axupimgs",
    toolbar:"image axupimgs"
    

    3.在data中存入七牛云所需的数据

    data:function{
    	return {
    	  QiniuData: {
            key: "", //图片名字处理
            token: "" //七牛云token
          },
          domain: "http://upload.qiniup.com", // 七牛云的上传地址
          qiniuaddr: "http://img.example.com" // 七牛云的图片外链地址
    	}
    }
    

    4.获取token,自定义图片上传方法

    getQiniuToken() {
          this.$http({
            url: this.$http.adornUrl("/lesson/file/qiniu-token"),
            method: "get"
          })
            .then(res => {
              this.QiniuData.token = res.data.token;
            })
            .catch(error => {});
        },
        imgUpload(blobInfo, success, failure) {
          const axiosInstance = axios.create({ withCredentials: false }); //withCredentials 禁止携带cookie,带cookie在七牛上有可能出现跨域问题
          let data = new FormData();
          data.append("token", this.QiniuData.token); //七牛需要的token,叫后台给,是七牛账号密码等组成的hash
          data.append("file", blobInfo.blob());
          axiosInstance({
            method: "POST",
            url: this.domain, //上传地址
            data: data,
            timeout: 30000, //超时时间,因为图片上传有可能需要很久
            onUploadProgress: progressEvent => {
              //imgLoadPercent 是上传进度,可以用来添加进度条
              let imgLoadPercent = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total
              );
            }
          })
            .then(data => {
    		  // 调用成功回调,返回用七牛外链地址和返回的key拼接的图片路径
              success(`${this.qiniuaddr}/${data.data.key}`);
            })
            .catch(function(err) {
              //上传失败
            });
        }
    

    5.调用方法

    mounted:function(){
    	this.getQiniuToken();
    },
    data(){
    	init:{
    		images_upload_handler: (blobInfo, success, failure) => {
              this.imgUpload(blobInfo, success, failure);
            }
    	}
    }
    

    二、图片批量上传

    1.此插件基于image插件,仍旧调用之前的图片上传方法

    2.建议将此插件放入static或其他目录,修改plugin.js文件中的文件路径

    var baseURL=tinymce.baseURL;
    var iframe1 = baseURL + '/static/plugins/axupimgs/upfiles.html';
    
    展开全文
  • TinyMCE上传图片word

    2020-09-09 11:10:30
    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布...我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部自动上传,不

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧
    Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中。如果需要单独保存则需要自已进行处理。比较麻烦。


    我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部自动上传,不需要再手动一张张处理。同时能够将图片上传到我指定的接口中,服务器需要将图片单独保存在存储服务器中,比如可能是云存储,或者是分布式存储,最后直接发布内容。
     

     

    感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。

    好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件。

    https://ueditor.baidu.com/website/umeditor.html(有兴趣可以试试)

     

     

    难道就这么失败了?

    ,但是我意外发现UMeditor竟然支持粘贴word中的多张图片(仅支持IE11,不支持IE10以下版本、以及Chrome等)

    切换HTML,会看到你的图片被组织成base64 

     

    nice,机会来了,既然IE支持复制word中的多张图片直接粘贴base64,既然有了base64我们就有办法上传转图片啦!

    那么我们来改造Ueditor,让他支持IE11(总比没得用强吧)

    打开你的ueditor.all.js(1.4.3版本以下行号根据自己使用的版本可能不同)

    1、注释掉14679行(暂时不明确有什么不良影响)

    //执行默认的处理

    //me.filterInputRule(root);

    2、在28725行插入以下代码(如果是使用IE11粘贴会得到base64,先用占位符占位,再逐个把base64专成Blob文件并上传,上传完成再替换为你的img属性src为服务器图片url)

     

    服务端上传代码

     

    处理后的效果,能够批量上传word中所有的图片,真的是太方便了。无论多少张图片都可以一次性批量上传。这个功能真的是太方便了,大幅度提升了内容编辑人员的效率。以前一天只能发布一篇文章,现在能够发布100篇,这效率简直提升了100倍呀。

     

    图片上传后保存在服务器端。而且也可以指定上传接口地址,这个也比较方便。因为我们的业务是将图片保存在单独的云存储服务器中。

     

    3、处理ueditor提供的uploadimage方法

    客户已经使用半年,没有问题,非常有用,非常方便的功能

    讨论群:223813913

     

    展开全文
  • tinymce上传图片方法

    千次阅读 2014-04-21 16:19:40
    这个问题困扰了我好久,虽然tinymce有可以上传图片的方法
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼thinkphp6 用富文本编辑器(tinymce)上传图片时,总是失败,tp6开发版用的时候是没有问题,当用了tp6正式版的时候便出现这种问题,返回的错误代码:不知道什么原因,跪求...
  • TinyMCE上传图片后端处理写法

    千次阅读 2019-12-10 01:26:02
    写法有两种,一种是先把图片转换成base64后再本地解析显示,这样可以直接将图片储存在HTML文件中,如果图片过多可能会让HTML文件过大,或者你可以将已经转码成base64的图片上传到服务器后服务器再转码成原jpg或png...
  • laravel 做管理后台, 需要在编辑器中实现图片上传功能, 刚开始使用的是 ckeditor , 但是在做图片上传功能时有遇到一些问题(ckeditor 将图片上传这块的前端代码以及json格式设定了,不太好.), 最终尝试使用 TinyMCE ...
  • <p>I haven’t done this before so how can I upload an image or images through tinymce so that they appear within the text at the front-end?? <p><strong>EDIT</strong> Here is my code. <p>This is my ...
  • TinyMCE 新增本地图片上传功能这样...实现思路:使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展,具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 Ti...
  • TinyMCE 官网 (类似:百度的富文本web编辑器UEditor)第一...第二步下载tinyMCE image upload 插件 tinymce-imageupload,解压后把该文件夹放在 tinymcejstinymceplugins目录下。该插件使用了jquery.iframe-post-form...
  • <!... <... <head> ...script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=... tinymce.init({ selector: 'textarea#mytextarea',//意思是将TinyMCE插件放入‘textarea’ID为mytextarea
  • 解决办法:在init初始化方法中设置 convert_urls:...TinyMCE会自动判断是否可以将当前图片路径变为相对路径。带有域名的路径也会被转换为相对路径。 文档对其描述如下: 我们只需将其自动转换url的功能关闭即可。 ...
  • 使用tinymce富文本编辑实现上传图片功能:第一步:使用jquery.form.js插件;自己去百度下载这个插件。第二步:在angular2的目录中引入,如何引入:在assets中建一个js文件夹,将jquery.form.js引入,然后到.angular-...
  • <p><img alt="" />...tinymce能够正常回显图片,可是这后面的get请求是什么回事,而且路径变成了8080端口,不应该是8001吗?新手求解释</p>
  • 上传图片" style="display:none;"> *"> 2 、EditArticle.aspx中添加标签 scriptLoader1.Scripts.Add("jqueryUpload.js"); 3、Article/mojoUploadFile.ashx文件 转载于:...
  • tinyMCE图片上传

    热门讨论 2013-03-15 16:37:43
    tinyMCE图片上传
  • TinyMCE自定义上传图片

    2018-12-04 12:37:16
    tinyMCE编辑器,包含自定义上传图片插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示
  • tinymce 图片上传插件

    2015-05-22 17:18:46
    tinymce 图片上传插件
  • tinymce图片上传

    2021-04-10 06:18:34
    对于上传图片功能,tinymce提供了很多相关配置http://tinymce.ax-z.cn/configure/file-image-upload.php 这里我们对其中的自定义上传图片进行简单的讲解,需要用到images_upload_url属性。 二、更改配置 在上一篇...
  • 具体的修改过程,请移步 博客文章:https://blog.csdn.net/yzw675628706/article/details/103286174,如果有什么问题,请大家多指正
  • tinymce 上传本地视频

    2021-05-26 10:31:42
    tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频 修改视频上传按钮 需要设置 file_picker_callback 在 tinymce.init 中添加 //自定义文件选择器的回调内容 此方法只有在点击...
  • 这样TinyMCE 就可以正常显示图片了...将Ajax上传图片集成到 TinyMCE 中, 主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。 了解TinyMCE的人应该知道 TinyMCE 类似 FireFox。 开发者

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,161
精华内容 864
关键字:

tinymce上传图片