百度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);
});