ASP.NET使用UEditor

最新推荐文章于 2021-04-30 18:23:10 发布

Dandelion_drq

最新推荐文章于 2021-04-30 18:23:10 发布

阅读量4k

点赞数

分类专栏：前端 ASP.NET 文章标签： ueditor asp.net

本文链接：https://blog.csdn.net/dandelion_drq/article/details/52878417

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

ASP.NET

6 篇文章 1 订阅

订阅专栏

声明： 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();
        }
}