正文

xheditor编辑器上传图片到oss(代码片段)

pingtouge  pingtouge  2023-01-03  265

关键词：

前段时间，公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思，想想基本的用户图片上传到自己服务器，还有点小占地方；

后来....然后直接上传到阿里云。接下来就是基本操作：

首先，引入官方提供的js库

技术分享图片

注：xhEditor插件下载官网：https://xheditor.com ;OSS~库引入直接复制以下即可：

    <!-- oss 上传文件 JavaScript 库 -->  
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

其次，进入xhEditor官方提供的js库里面

技术分享图片

注：因我当时看的是xhEditor压缩过后，所以看起来很不方便，所以在此表明黄色标注为：全局可搜索。红色标注为：自定义属性。

var i = e(‘<span class="xheUpload">
    i.append(‘<input type="file"‘ + (1 < p ? ‘ multiple=""‘ : "") + ‘ class="xheFile" size="13" id="UpOss"  name="filedata" tabindex="-1" />‘);
var h = e(".xheFile", i); h.change(function ()

接下来，在上面段落的Change事件中开始表演

第一步：声明自己的accessKeyId 和 accessKeySecret 这需要到阿里云里面去设置

技术分享图片

  var _Client = new OSS.Wrapper(
        region: ‘oss-cn-shanghai‘,                              
        accessKeyId: ‘xxxxxxxxxxxxxx‘,                          
        accessKeySecret: ‘xxxxxxxxxxxxxxxxxxxxxxxxx‘,           
        bucket: ‘xxxxxxx‘
       );

第二步：紧接上面，文件上传

   var _File = document.getElementById("UpOss").files[0];   // 获取文件流
   var _Val = document.getElementById("UpOss").value;       
   var suffix = _Val.substr(_Val.indexOf(".")),             // 文件名后缀名
                                   
     obj = timestamp(),     //文件名 也就是时间戳
     ymd = timesymd();      //自定义文件夹

   var stAs = ymd + "/" + obj + suffix;     //上传到阿里云的文件地址       
       _Client.multipartUpload(stAs, _File).then(function (result) 
           console.log(result);       //返回对象
           console.log(result.url);   //返回链接                    

            a.val(result.url);   //赋值
                     
            ).catch(function (err) 
                console.log(err);  // 返回异常
            );

生成文件夹文件名

技术分享图片

//文件夹 时间戳 
function timesymd()  
    var time = new Date();
    var y = time.getFullYear(); 
    var m = time.getMonth() + 1;
    var d = time.getDate(); 
    return "" + y + _Add(m) + _Add(d)
     ;

 //文件名  时间戳 
 function timestamp() 
    var time = new Date();
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate(); 
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds(); 
    return "" + y + _Add(m) + _Add(d) + _Add(h) + _Add(mm) + _Add(s);
    ；

  function _Add(m)  return m < 10 ? ‘0‘ + m : m;

最后，备注

注：此方法上传图片需要去阿里云配置上传权限

技术分享图片

vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)

近期项目中需要使用富文本编辑器，开始想到的富文本编辑器是百度的UEditor，UEditor功能齐全、插件多，但是图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，而且是PHP、JSP、ASP、.Ne... 查看详情

简单上传图片到阿里云oss(代码片段)

...列、删除 Bucket；2、修改、获取Bucket的访问权限；3、上传、查看、罗列、删除Object/Object Group；4、访问时支持If-Modified-Since和If-Match等HTTP参数。特点具体如下：1、易用性：简单易用，便于管理，深度集成数据处理服务；2... 查看详情

vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)

富文本编辑器xheditor支持从word复制粘贴保留格式和图片的插件

由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其... 查看详情

xheditor实现ctrl+v粘贴word图片并上传

tinymce是很优秀的一款富文本编辑器，可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%8... 查看详情

从word中复制图片到xheditor编辑器中

...息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本编辑器里面方法一：工具/原料百度doc任意富文本编辑器，以UEDdito... 查看详情

xheditor实现ctrl+v粘贴图片并上传word粘贴带图片

这些例子的特效很炫，感觉的同学可以研究学习一下

...target_desc.php?id=02bkjbbkj水滴导航选项卡栏目制作xheditor文本编辑器插件制作html编辑器使用代码点击》xheditor文本编辑器插件制作html编辑器使用代码中文版xheditor文本编辑器插件制作xheditor编辑器使用_xheditor编辑器上传图片_xheditor编... 查看详情

markdown：如何修改插入图片的大小或比例(代码片段)

在Markdown编辑器中插入图片有两种方法：第一种插入图片方法直接插入图片，即复制一张图片然后直接粘贴到编辑器里。不同编辑器的显式方式不同，有的是显式".png"的文件名，图片以附件形式存在，有... 查看详情

markdown：如何修改插入图片的大小或比例(代码片段)

vue+springboot上传oss阿里云并回显到前端页面(代码片段)

vue+Springboot上传图片到oss并回显最近需要用到文件上传了，找了好多博客，最后总结了一下，记录一下操作。1、前端代码<el-buttontype="primary"round@click="uploadvisible=true&#... 查看详情

阿里云oss图片上传(代码片段)

背景上周接到一个新的需求，要在客户端上报图片信息，以前是存在七牛上，现在要全部转到阿里云的oss上，然后那周基本都在啃阿里云的官方文档，最后完成了这个需求，现在来分享一下Java开发的SpringBo... 查看详情

项目总结56：阿里云oss上传的图片被自动旋转问题解决(代码片段)

项目总结56：阿里云OSS上传的图片被自动旋转问题解决问题：上传图片到阿里云OSS，再再HTML标签使用OSS图片路径，展示的图片被自动旋转了；但是将图片图片路径直接浏览器打开，是原始没有旋转过的；解决方案：　　阿里... 查看详情

图片上传阿里云oss(代码片段)

1、composer加载oss插件composerrequirealiyuncs/oss-sdk-php 2、更改config配置 //控制器代码如下 publicfunctionaliyun($category=‘‘,$isunlink=false,$bucket="phpchai")$file=$_FILES;$savePath=$file[‘file‘][‘name‘];//文件名称$accessKeyI... 查看详情

阿里云oss工具上传图片(代码片段)

文档：https://help.aliyun.com/document_detail/44075.html下载工具https://help.aliyun.com/document_detail/120075.html?spm=a2c4g.11186623.6.840.151b62e7LMdYoU我是windowsWindows系统安装单击下载链接下载工具。将工具解压ÿ 查看详情

typecho支持上传本地图片的编辑器插件

...：http://msiyuetian.blog.51cto.com/8637744/1920161Typecho自带的文章编辑器太简洁了，很多功能都缺少，比如本地上传图片等功能。本文主要介绍一款插件：XhEditor1.0.2，支持本地上传图片，也可以直接拖放图片到编辑器中。1、下载插件，解... 查看详情

springboot上传文件到阿里云oss(代码片段)

/***方法描述:文件上传**@authorleon2017年7月25日上午10:54:37*@paramrequest*@paramresponse*@return*/@RequestMapping(value="/upload",method=RequestMethod.POST)@ResponseBodypubl 查看详情

上传文件到oss大小时间受限制,如何设置oss的timeout(代码片段)

超时:在前端接口设置timeout//上传文件exportfunctionuploadPackage(data)returnrequest(url:‘/version/package_upload‘,method:‘post‘,headers:‘Content-type‘:‘multipart/form-data‘,,data,timeout:600*1000,)官方地址:https: 查看详情

正文

xheditor编辑器上传图片到oss(代码片段)

vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)

简单上传图片到阿里云oss(代码片段)

vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)

富文本编辑器xheditor支持从word复制粘贴保留格式和图片的插件

xheditor实现ctrl+v粘贴word图片并上传

从word中复制图片到xheditor编辑器中

xheditor实现ctrl+v粘贴图片并上传word粘贴带图片

这些例子的特效很炫，感觉的同学可以研究学习一下

markdown：如何修改插入图片的大小或比例(代码片段)

markdown：如何修改插入图片的大小或比例(代码片段)

vue+springboot上传oss阿里云并回显到前端页面(代码片段)

阿里云oss图片上传(代码片段)

项目总结56：阿里云oss上传的图片被自动旋转问题解决(代码片段)

图片上传阿里云oss(代码片段)

阿里云oss工具上传图片(代码片段)

​typecho支持上传本地图片的编辑器插件

springboot上传文件到阿里云oss(代码片段)

上传文件到oss大小时间受限制,如何设置oss的timeout(代码片段)

typecho支持上传本地图片的编辑器插件