百度editor调用简单,但是图片和文件上传阿里云就有点难度了。下面我详细说一下。

百度富文本编辑器下载地址:http://ueditor.baidu.com/website/download.html

根据语言来选择版本

   <script src="~/Scripts/ueditor/ueditor.config.js"></script>
<script src="~/Scripts/ueditor/ueditor.all.js"></script> <script id="container" type="text/plain"> <script>
var ue = new UE.ui.Editor({ initialFrameHeight: , serverUrl: "/Scripts/ueditor/net/controller.ashx?htmlid=Articles" });
ue.render("container"); </script>

此时富文本编辑器已经可以用了,但是上传图片等一系列功能不可以使用

在UploadHandler.cs 类中的  public override void Process()方法中添加上传到阿里云的代码

public override void Process()
{
byte[] uploadFileBytes = null;
string uploadFileName = null;
HttpPostedFile file = null;
if (UploadConfig.Base64)
{
uploadFileName = UploadConfig.Base64Filename;
uploadFileBytes = Convert.FromBase64String(Request[UploadConfig.UploadFieldName]);
}
else
{
file = Request.Files[UploadConfig.UploadFieldName];
uploadFileName = file.FileName; if (!CheckFileType(uploadFileName))
{
Result.State = UploadState.TypeNotAllow;
WriteResult();
return;
}
if (!CheckFileSize(file.ContentLength))
{
Result.State = UploadState.SizeLimitExceed;
WriteResult();
return;
} uploadFileBytes = new byte[file.ContentLength];
try
{
file.InputStream.Read(uploadFileBytes, , file.ContentLength);
}
catch (Exception)
{
Result.State = UploadState.NetworkError;
WriteResult();
}
} Result.OriginFileName = uploadFileName; var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat); try
{
// 文件上传后的保存路径
var extName = Path.GetExtension(Result.OriginFileName);
if (string.IsNullOrWhiteSpace(extName))
{
return ;
} var accessId = NeedHelp.ossKeyId;
var accessKey = NeedHelp.ossKeySectet;
var bucketName = NeedHelp.bucketName;
//oss所在的地区
var endpoint = "http://oss-cn-qingdao.aliyuncs.com ";
var extenname = ".oss-cn-qingdao.aliyuncs.com/";
var fileName = "essayimg/" + Result.OriginFileName;
OssClient client = new OssClient(endpoint, accessId, accessKey);
System.IO.Stream inputStream = new MemoryStream(uploadFileBytes);【
System.IO.Stream inputStream = file.inputStream; 这种方法不行,图片上传以后是个空的

ObjectMetadata objectMetadata = new ObjectMetadata(); client.PutObject(bucketName, fileName, inputStream, objectMetadata); AccessControlList bucketAcl = client.GetBucketAcl(bucketName); var result = ((!bucketAcl.Grants.Any()) ? client.GeneratePresignedUri(bucketName, fileName, System.DateTime.Now.AddMinutes(5.0)).AbsoluteUri : string.Format("http://{0}{1}{2}", bucketName, extenname, fileName)); inputStream.Dispose(); Result.Url = result; Result.State = UploadState.Success; } catch (Exception e) { Result.State = UploadState.FileAccessError; Result.ErrorMessage = e.Message; } finally { WriteResult(); } }

到这是还有一个地方需要修改,不然返回发到富文本编辑器的路径有问题:如src="/editor/net/http://********",这样图片就无妨显示

这时休要修该config.json

把路径清空就好了

好了,如此就搞定了

关于editor的取值和赋值

取值
var ue1 = UE.getEditor('container');
var content = ue1.getContent();
赋值

  ue.ready(function () {
var con = $("#introduce").val();
ue.setContent(con);
});

百度editor调用【图片上传阿里云】的更多相关文章

  1. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  2. base64格式的图片上传阿里云

    base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...

  3. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  4. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  5. 百度Ueditor多图片上传控件

    发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面 ...

  6. ueditor单独调用图片上传

    很多人在问ueditor,如何单独使用图片上传功能,但是网上没有一篇能用的文档,没办法,我刚好也需要这个功能,花了3天时间(本人水平太菜,哎)终于知道怎么处理了,发出来给大家共享: 效果如下: 页面效 ...

  7. 使用laravel-amdin调用文件上传阿里oss注意点

    开发者工作中,项目代码开发提高效率,往往会使用一些github上面的一些扩展类,这里举例说明一下遇到的情况. 一.使用laravel-admin框架开发管理后台文件或者图片上传 情景:运营或者产品通过 ...

  8. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

  9. ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

    今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...

随机推荐

  1. 华为OJ机试训练(一)

    题目1 -- 通过输入英文句子.将每一个单词反过来,标点符号顺序不变.非26个字母且非标点符号的情况就可以标识单词结束. 标点符号包含,.!? 比如输入:Hello, I need an apple. ...

  2. table+js实现网站左侧列表下拉隐藏

    <script language="javascript">                    function showHide(obj){            ...

  3. Window Server 2012无线网卡和声卡驱动解决方法

    刚开始安装server2012时,驱动一直装不上以为是驱动的问题,后来在网上找了一下才明白是为啥,由于服务器默认不会开启无线LAN功能.和声卡服务,下面简单的方式给大家介绍一下解决方法: 无线网卡解决 ...

  4. Devpexpress 打印预览问题

    devexpress 12 之前报表打印: XtraReports rp1 = new XtraReports(); rp1.ShowPreview(): 即可预览报表: devexpress 13 ...

  5. Tomcat启动失败的解决方法

    在使用Tomcat的时候,经常会遇到启动失败的问题:解决方法:1.检查环境变量的配置,jdk的配置2.检查端口是否被占用. 关于环境变量的配置很容易搜到,如果按照网上的教程配置好了,但是还是启动失败的 ...

  6. leetcode Same Tree python

    # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val = ...

  7. 常用js表单文本域验证

    1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...

  8. js 全局变量

    使用cookies可以设置全局变量 ,由于每次刷新变量都会为初始值,cookies可以作为全局变量的容器

  9. UIWebViewでローカルにあるHTMLを表示する&iOS6からtextAlignmentで指定する値が変更になった

    [objective-c]UIWebViewでローカルにあるHTMLを表示する xcode内にHTMLを格納して.そのHTMLをWebViewで表示する方法です. // UIWebViewの初期化UI ...

  10. OpenCV学习 4:摄像头视频读写与边缘检测

    原创文章,欢迎转载,转载请注明出处 想实现人脸识别,车辆识别,车牌识别.一般我们可不是读硬盘里面的视频文件的,都是直接从摄像头读取视频流然后直接识别的.所以读取摄像头的视频流这是基础...OpenCV ...