声明: UEditor
其实本人也是第一次用,因此想记录一下,以便下次再用的时候有笔记可以查。嗯……有什么写错的请大家多多指教啦~~
首先推荐大家看一下官方网站,里面的文档非常详细,基本上可以看着教程自己完成部署使用。
本文只介绍ASP.NET 的环境,其他语言请参考官网啦。
下载 ueditor
下载地址:http://ueditor.baidu.com/website/download.html#ueditor
PS: 本人使用的是 1.4.3.3 .Net UTF-8版
前端部署与测试
1. Demo程序
大家下载后看到的文件夹应该是这样子的:
我们把 tuf8-net
这个文件夹改名为 ueditor
并添加到建好的asp.net项目里。
这里我用了一个文件夹 Libs
来存放它们。如图:
然后我们先写个Demo页面测试一下是否部署成功。
代码如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/Libs/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/Libs/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
PS:这是官网的Demo代码。
好了,运行一下。
这时候你可能会遇到以下错误:
未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
解决办法:更新一下 json.net 包就可以了。
具体:工具–》NuGet程序包管理器–》程序包管理器控制台–》
输入 update-package Newtonsoft.Json -Version 6.0.2
这次我们应该能加载到正确的页面啦。
2. 定制工具栏
我们可以看到 Ueditor
是提供了很多功能的,不过有一些可能我们用不到,不过没关系,我们可以自定义工具栏。
有两种实现方法:
方法一:修改
ueditor.config.js
里面的toolbars
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL + "net/controller.ashx"
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
'undo', //撤销
'redo', //重做
'|', //分割线
'bold', //加粗
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'|',
'justifyleft', //居左对齐
'justifycenter', //居中对齐
'justifyright', //居右对齐
'justifyjustify', //两端对齐
'|',
'indent', //首行缩进
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'|',
'forecolor', //字体颜色
'backcolor', //背景色
'|',
'link', //超链接
'simpleupload', //单图上传
'|',
'cleardoc', //清空文档
'|',
'fontfamily', //字体
'fontsize', //字号
'fullscreen', //全屏
]]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
//,labelMap:{
// 'anchor':'', 'undo':''
//}
......
}
PS:配置项里用竖线 ‘|’ 代表分割线。
然后Demo程序不用改,此时再加载能获得下图:
方法二:实例化编辑器的时候传入 toolbars 参数
不用改 ueditor.config.js
,Demo程序里实例化UEditor编辑器的时候定义 toolbars
参数。
var ue = UE.getEditor('container', {
toolbars: [[
'undo', //撤销
'redo', //重做
'|',
'bold', //加粗
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'|',
'justifyleft', //居左对齐
'justifycenter', //居中对齐
'justifyright', //居右对齐
'justifyjustify', //两端对齐
'|',
'indent', //首行缩进
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'|',
'forecolor', //字体颜色
'backcolor', //背景色
'|',
'link', //超链接
'simpleupload', //单图上传
'|',
'cleardoc', //清空文档
'|',
'fontfamily', //字体
'fontsize', //字号
'fullscreen', //全屏
]],
initialFrameWidth :800, // 编辑器宽度
initialFrameHeight:250 // 编辑器高度
});
3. 设置和读取编辑器的内容
通过 getContent
和 setContent
方法可以设置和读取编辑器的内容。
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容,返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容,返回: hello
var txt = ue.getContentTxt();
});
后台部署
其实 UEditor
可以定制的前后台配置都很多,但大部分我们不用修改也够用。因此这里后台部署我主要讲两方面,一是图片上传路径配置问题,二是上传图片的压缩问题。
1. 图片上传后台路径配置
我试着点击上传图片并选择了一张图片,我们可以看到,没配置的时候图片路径是不对的。
.Net版的后台配置文件在 net/
目录下的 config.json
文件。
根据官方文档,我们需要可能修改以下几个地方:
{
...
"imageUrlPrefix": "/Libs/ueditor/net/", /* 图片访问路径前缀,根据ueditor文件夹在你的项目中哪个位置来改 */
"imagePathFormat": "upload/image/{yyyy}{mm}/{time}{rand:6}", / *这里根据需要修改,我改成了按月份分文件夹 * /
...
}
剩下的基本按原设置就好。
保存,刷新页面,再次尝试上传图片,成功。
根据我们的设置,图片会保存在 /Libs/ueditor/net/upload/image
路径下。
2. 上传图片压缩
说明: UEditor
的图片上传有两种,分别是单图上传和多图上传。
单图上传用的是简单的表单上传,没有使用上传插件,不会对图片进行压缩。
多图上传的话可以通过修改 net/
目录下的 config.json
文件中 imageCompressBorder
的值来限制图片大小。
此外,我们也可以自己添加方法,在后台保存图片时进行压缩,此时要修改一下后台的代码。
关于后台代码的详细文件分析可以看这里:http://fex.baidu.com/ueditor/?#server-net
上传图片文件时会调用 UploadHandeler.cs
的 Process
方法。
File.WriteAllBytes(localPath, uploadFileBytes);
这句是保存文件,我们可以在保存图片之前对图片进行压缩,然后返回压缩后的图片路径。(Result.Url = modifiedPath;
)
public override void Process()
{
...
try
{
if (!Directory.Exists(Path.GetDirectoryName(localPath)))
{
Directory.CreateDirectory(Path.GetDirectoryName(localPath));
}
File.WriteAllBytes(localPath, uploadFileBytes);
// 压缩图片
Image sourceImg = Image.FromFile(localPath);
double scale = (Convert.ToDouble(sourceImg.Height) / Convert.ToDouble(sourceImg.Width));
// 调用图片压缩方法对图片进行压缩
Image modifiedImg = CommonHelper.GetThumbnail(sourceImg, 370, scale);
savePath = Server.MapPath("upload/modifiedImage/123.jpg");
modifiedImg.Save(savePath);
// 返回压缩后的图片url
Result.Url = "upload/modifiedImage/123.jpg";
Result.State = UploadState.Success;
}
catch (Exception e)
{
Result.State = UploadState.FileAccessError;
Result.ErrorMessage = e.Message;
}
finally
{
WriteResult();
}
}
测试一下~~
原图:
压缩后:
测试成功!