系列目录
目录：
- 前言
- 开发环境
- 知识点
- 初始使用
- 自定义工具栏
- 设置和读取编辑器内容
- 文件上传
- ueditor加水印
------------------------------------------------
下载地址在尾部
1.前言：之前一直用KingEditor富文本编辑器,在国产编辑器中算是顶尖的插件。但是这个编辑器集成度较差，也很久没有更新了，今天学习百度产品UEeditor使用！
2.开发环境：VS2013+MVC5
3.知识点：上传加水印功能
各自选择自己语言的版本。我这里是.net版本就选择.net版本 UTF-8
同时可以选择Mini版本，Mini版本在日常也是够用的。开发版功能比较齐全，包括在线编辑WORD,地图，图表等功能。如果是普通的，比如博客类的，回复类使用的，使用mini版比较何时。
4.初次开始：
新建MVC5项目名为UEeditorForMVC，并解压下载的ueditor到Script文件夹下，utf8-net改名为UEeditor
初始部署使用：修改index.cshtml
@{ ViewBag.Title = "Home Page"; } <script src="~/Scripts/ueditor/ueditor.config.js"></script> <script src="~/Scripts/ueditor/ueditor.all.min.js"></script> <script> //加载编辑器 var ue = UE.getEditor('container', { }); </script> <script id="container" name="content" style=" height: 228px; " type="text/plain"> </script>
运行后出现效果，证明配置已经成功！
5.配置工具栏
有时候我们需要自定义工具栏，2个地方可以进行配置，一个是全局的配置文件ueitor.config.js,修改这个文件将导致整站所有编辑器一并修改
单独配置在加载编辑器时候触发：
<script> //加载编辑器 var ue = UE.getEditor('container', { toolbars: [[ 'fullscreen', 'source', 'bold', 'italic', 'underline', 'forecolor', 'insertorderedlist', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'link', 'unlink', 'simpleupload', 'snapscreen' ]] }); </script>
这个加载可以发现与config.js是对应的。包括接口路径，主题等，都可以单独配置
效果如下，我只配置了最常用的工具栏
6.设置和读取编辑器内容
ue.ready(function() { //设置编辑器的内容 ue.setContent('hello'); //获取html内容，返回: <p>hello</p> var html = ue.getContent(); //获取纯文本内容，返回: hello var txt = ue.getContentTxt(); });
可以设置编辑器的内容。比如文章可以获取后调用
ue.setContent('hello');为编辑器设置内容
7.文件上传
文件上传是本文的主要内容,我们必须了解一下接口。
controller.ashx 这是一个处理文件，继承IHttpHandler接口。所有文件的上传必须经过这个文件处理
App_Code文件夹下的UploadHandler.cs为上传处理文件。
执行顺序由controller.ashx判断处理后调用UploadHandler。
初始上传会成功，但是没有图片显示
这是因为路径文件造成
研究发现net根目录下有文件config.json。这个是一个json格式的配置文件
这里可以配置所有上传时候的参数包括，上传路径，文件命名，远程抓取路径等
我们这里只修改第11行代码即可
"imageUrlPrefix": "/Scripts/ueditor/net/", /* 图片访问路径前缀 */
修改上传路径：在62行
8.加入水印
既然我们知道修改文件为上传文件，那么修改上传处理逻辑可以加入水印
添加一个水印类
WaterMark.cs
/// <summary>
/// 文字水印
/// </summary>
/// <param name="imgPath">服务器图片相对路径</param>
/// <param name="filename">保存文件名</param>
/// <param name="watermarkText">水印文字</param>
/// <param name="watermarkStatus">图片水印位置 0=不使用 1=左上 2=中上 3=右上 4=左中 9=右下</param>
/// <param name="quality">附加水印图片质量,0-100</param>
/// <param name="fontname">字体</param>
/// <param name="fontsize">字体大小</param>
AddImageSignPic方法参数解析
这样我们修改自带的UploadHandler.cs第68行try方法为
try
{
if (!Directory.Exists(Path.GetDirectoryName(localPath)))
{
Directory.CreateDirectory(Path.GetDirectoryName(localPath));
}
file.SaveAs(localPath);
WaterMark.AddImageSignText(localPath, localPath,
"ymnets", 9,
80, "Tahoma", 12);
//WaterMark.AddImageSignPic(serverFileName, serverFileName,
// "传入水印图片路径", 9,
// 80, 5);
Result.Url = savePath;
Result.State = UploadState.Success;
}
保存后调用写水印函数，完整的
UploadHandler
这次我们再次上传预览效果
成功生成一个文字水印。这个水印类也包含了图片LOGO形式的
WaterMark.AddImageSignPic(serverFileName, serverFileName,
"传入水印图片路径", 9,
80, 5);
注掉文字的替换这句：
我下载了博客园的LOGO，那么结果显然
模糊度和图片透明度都有关系.
本文转自ymnets博客园博客，原文链接：http://www.cnblogs.com/ymnets/p/5247638.html，如需转载请自行联系原作者
