ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

系列目录

目录:

  1. 前言
  2. 开发环境
  3. 知识点
  4. 初始使用
  5. 自定义工具栏
  6. 设置和读取编辑器内容
  7. 文件上传
  8. ueditor加水印

------------------------------------------------

下载地址在尾部

1.前言:之前一直用KingEditor富文本编辑器,在国产编辑器中算是顶尖的插件。但是这个编辑器集成度较差,也很久没有更新了,今天学习百度产品UEeditor使用!

2.开发环境:VS2013+MVC5

3.知识点:上传加水印功能

下载编辑器

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

各自选择自己语言的版本。我这里是.net版本就选择.net版本 UTF-8

同时可以选择Mini版本,Mini版本在日常也是够用的。开发版功能比较齐全,包括在线编辑WORD,地图,图表等功能。如果是普通的,比如博客类的,回复类使用的,使用mini版比较何时。

4.初次开始:

新建MVC5项目名为UEeditorForMVC,并解压下载的ueditor到Script文件夹下,utf8-net改名为UEeditor

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

初始部署使用:修改index.cshtml

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
@{
    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>
ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

运行后出现效果,证明配置已经成功!

5.配置工具栏

有时候我们需要自定义工具栏,2个地方可以进行配置,一个是全局的配置文件ueitor.config.js,修改这个文件将导致整站所有编辑器一并修改

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

单独配置在加载编辑器时候触发:

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
<script>
    //加载编辑器
    var ue = UE.getEditor('container', {
        toolbars: [[
                'fullscreen', 'source',
                'bold', 'italic', 'underline', 'forecolor', 'insertorderedlist',
               'fontfamily', 'fontsize',
                'justifyleft', 'justifycenter',
                'link', 'unlink',
                'simpleupload', 'snapscreen'
        ]]
    });
</script>
ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

这个加载可以发现与config.js是对应的。包括接口路径,主题等,都可以单独配置

效果如下,我只配置了最常用的工具栏

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

6.设置和读取编辑器内容

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
 ue.ready(function() {
        //设置编辑器的内容
        ue.setContent('hello');
        //获取html内容,返回: <p>hello</p>
        var html = ue.getContent();
        //获取纯文本内容,返回: hello
        var txt = ue.getContentTxt();
    });
ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

可以设置编辑器的内容。比如文章可以获取后调用

ue.setContent('hello');为编辑器设置内容

具体参考官方文档

7.文件上传

文件上传是本文的主要内容,我们必须了解一下接口。

controller.ashx 这是一个处理文件,继承IHttpHandler接口。所有文件的上传必须经过这个文件处理

App_Code文件夹下的UploadHandler.cs为上传处理文件。

执行顺序由controller.ashx判断处理后调用UploadHandler。

初始上传会成功,但是没有图片显示

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

这是因为路径文件造成

研究发现net根目录下有文件config.json。这个是一个json格式的配置文件

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

这里可以配置所有上传时候的参数包括,上传路径,文件命名,远程抓取路径等

我们这里只修改第11行代码即可

 "imageUrlPrefix": "/Scripts/ueditor/net/", /* 图片访问路径前缀 */

修改上传路径:在62行

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

8.加入水印

既然我们知道修改文件为上传文件,那么修改上传处理逻辑可以加入水印

添加一个水印类

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用 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方法为

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
 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;
        }
ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

保存后调用写水印函数,完整的

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用 UploadHandler

这次我们再次上传预览效果

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

成功生成一个文字水印。这个水印类也包含了图片LOGO形式的

 WaterMark.AddImageSignPic(serverFileName, serverFileName,
             "传入水印图片路径", 9,
              80, 5);

注掉文字的替换这句:

我下载了博客园的LOGO,那么结果显然

ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

模糊度和图片透明度都有关系.


本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/5247638.html,如需转载请自行联系原作者

上一篇:高德客户端及引擎技术架构演进与思考


下一篇:json和xml封装数据、数据缓存到文件中