MVC3.0下使用百度富文本编辑器UMEditor1.2.2上传图片

最新推荐文章于 2023-03-29 14:11:36 发布

tl110110tl

最新推荐文章于 2023-03-29 14:11:36 发布

阅读量3.3k

点赞数

分类专栏： MVC 文章标签： c# mvc 编辑器百度图片

本文链接：https://blog.csdn.net/tl110110tl/article/details/25513549

版权

MVC 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

感谢我的朋友刚子！

以及其他很多的文章的作者！

百度富文本编辑器UMEditor1.2.2是百度2014-03-19日推出的一款Mini版UEditor。

富文本编辑器下载地址如下
点击打开链接

今天弄了一天，最后总结出步骤，供大家参考，有不足和需要注意的地方，请您提出宝贵的意见！

环境：

VS2010，MVC3架构，4.0framework环境

一：下载百度富文本编辑器UMEditor1.2.2后，将解压的文件夹整个复制在项目中，结构如下（这里我将文件夹名字从“umeditor1_2_2-utf8-net”改成了"umeditor"）

二：在Controllers控制器下新增一个控制器 UMEditorController.cs，并在该控制器下，写两个方法，一个用来展示数据，一个用来新增数据

三：在新增数据方法的页面中，照着文档示例添加JS文件和对应的富文本等，这里为了简单，直接给出页面代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>AddByUMEditor</title>
    <link href="../../umeditor/themes/default/css/umeditor.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../umeditor/third-party/jquery.min.js" type="text/javascript"></script>
    <script src="../../umeditor/umeditor.config.js" type="text/javascript"></script>
    <script src="../../umeditor/umeditor.js" type="text/javascript"></script>
    <script src="../../umeditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var um = UM.getEditor('myEditor');
            $("#btnSub").click(function () {
                subReMark();
            });
        });

        function subReMark() {
            var ReMark = UM.getEditor('myEditor').getContent();
            $.ajax({
                url: "/UMEditor/AddByUMEditor",
                type: "post",
                cache: false,
                data: { "ReMark": ReMark },
                success: function (data) {
                    alert(data);
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <!--style给定宽度可以影响编辑器的最终宽度-->
        <script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
            <p>这里我可以写一些输入提示</p>
        </script>
    </div>
    <input type="button"  value="提交吧超人" id="btnSub" />
</body>
</html>

后台 AddByUMEditor方法主要代码如下

[HttpPost]//post请求
[ValidateInput(false)]//因为传入的内容包含“<”等数据，所以安全校验不通过，这里要取消安全校验
public ActionResult AddByUMEditor(FormCollection collection)
{
    Model.Role role = new Model.Role();
    //...此处省略其他字段
    //将富文本编辑器中的代码放入ReMark字段
    role.ReMark = Request["ReMark"];
    //新增数据
    _roleBLL.AddEntity(role);
    //返回传过来的编辑器中的内容，因为是开发阶段，所以方便看是否是空的等。
    return Content(role.ReMark);
}

四：打开项目的Web.config配置文件，在<system.web>节点下添加如下代码以取消安全校验

<system.web>
    <httpRuntime requestValidationMode="2.0"/>

五：修改如下图中标记的两个文件的某些小地方，以完成最后的配置工作

1：imageUp.ashx 中主要改文件存放的路径以保证图片文件存放在主目录下

源来的

        //上传配置
        string pathbase = "upload/";

修改为

        //上传配置
        string pathbase = "../../upload/";

这样上传的图片文件便可以存放在根目录下，而不是net目录下，反正我跟喜欢这样！

2：右键Uploader.cs文件，选择属性，将 “编译” 改为 “内容”

好了，一切就绪，可以上传图片了！

运行效果图如下：

数据展示页面：

tl110110tl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MVC3.0下使用百度富文本编辑器UMEditor1.2.2上传图片

本人搞了一天，最后感谢我的朋友gang
复制链接

扫一扫

专栏目录