Ueditor在asp.net 中的应用

使用方法查看官网

editor_config.js中配置 URL 为你网站的绝对路径例 var URL = "/scripts/ueditor/";

需在编辑器外套上一层FORM标签,配置项中设定一个名为textarea的值
    例:
    <form id="myForm" action="getContent.ashx" method="post">
    <script type="text/plain" id="myEditor">这里可以填写一些初始化内容</script>
    <input type="submit" value="Form内部提交数据" />
    </form>
    
    <script type="text/javascript">
      var editor = new baidu.editor.ui.Editor({
          textarea:'myValue' //服务器取值的ID
      });
      editor.render("myEditor");
    </script>
服务端就可以用Request.Form["myValue"]获取到数据
如果用的是MVC3 ,在web.config中的system.web节点添加 <httpRuntime requestValidationMode="3.0"/>,并给方法添加[ValidateInput(false )]的特性 
   如果提交按钮不在form内,在Form外点击提交需要这样才能获取编辑器内容
    if(editor.hasContents()){ //提交条件满足时提交内容
       editor.sync(); //此处的editor是页面实例化出来的编辑器对象
       document.getElementById('myForm').submit();
    }

服务端获取内容后,要去内容进行过滤和转义再存入数据库

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false">
</asp:ScriptManager>

　　

//不管在数据提交时是否进行过 HTML字符的转义Server.HtmlEncode(Request.Form["myValue"]);
//那么,在取数据时都要解码
Server.HtmlDecode(Content);
前台获取数据时,需要对html进行解码操作
<script type="text/javascript">
    var editor = new baidu.editor.ui.Editor({     
        autoClearinitialContent:true,
        textarea: 'myValue'
    });
    editor.render("myeditor");
      
     //编辑器呈现后,设置内容 
var c =DeCodeHTML('@Model.Content'); //MVC3       
    editor.setContent(c);//前台己取到html字符数据

//前台对html字符的转义的JS代码
//对Html编码
function EnCode(source) {
    return String(source)
                .replace(/&/g,'&')
                .replace(/</g,'<')
                .replace(/>/g,'>')
                .replace(/"/g, """)
                .replace(/'/g, "'");
    };

//解码HTML字符
    function DeCodeHTML(source) {
        var str = String(source)
                .replace(/"/g, '"')
                .replace(/</g, '<')
                .replace(/>/g, '>')
                .replace(/&/g, "&");
        //处理转义的中文和实体字符
        return str.replace(/&#([\d]+);/g, function (_0, _1) {
            return String.fromCharCode(parseInt(_1, 10));
        });
    };
</script> 

取值建议这样做:不会报JS错误

<script type="text/plain" id="myEditor">
<%=newsContent %> //后台数据
</script>

<script type="text/javascript">
var editor = new baidu.editor.ui.Editor({textarea: 'myValue'});

editor.render("myEditor"); 

</script>

 

图片的上传

1.需要自己写一段上传的逻辑代码,存放在

ueditor/server/upload/Upload.ashx,在代码中去设置文件保存的路径与类型,大小; 参数uploadPath, fileType 和 fileSize

public void ProcessRequest(HttpContext context)
    {


        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        //文件上传状态,初始默认成功，可选参数{"SUCCESS","ERROR","SIZE","TYPE"}
        //String ftype = ".jpg,.jpeg,.gif,.png,.bmp";   //文件允许格式  自己写去
        String state = String.Empty;
        String title = String.Empty;
        String url = String.Empty;
        //文档上传路径
        String pathbase = "/upload/img/" + DateTime.Now.Year.ToString() + "/" + DateTime.Now.Month.ToString() + "/";
        String uploadPath = context.Server.MapPath("~" + pathbase);
        String filename = String.Empty;
        try
        {
            HttpPostedFile uploadFile = context.Request.Files[0];
            if (uploadFile.ContentLength > 0)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);

                }
                filename = DateTime.Now.ToString("yyyy-MM-dd-ss") + System.Guid.NewGuid() + ".jpg";
                uploadFile.SaveAs(uploadPath + filename);
                url = pathbase + filename;
                title = filename;
                state = "SUCCESS";
            }
        }
        catch (Exception)
        {

            state = "ERROR";
        }
        //获取图片描述
        if (context.Request.Form["pictitle"] != null) {
            if (!String.IsNullOrEmpty(context.Request.Form["pictitle"]))
            {
                filename = context.Request.Form["pictitle"];
           }
        }
        HttpContext.Current.Response.Write("{'url':'" + url + "','title':'" + filename + "','state':'" + state + "'}");
    }

2.修改ueditor/dialogs/image/image.html 查找"上传处理页面的url地址",将url改为实际地址,例如本例:url:"http://www.cnblogs.com/server/upload/net/upload.ashx"

3.backgroundUrl、listBackgroundUrl和buttonUrl这三个参数可以自己定义上传框的背景、图片预览框的背景和上传按钮的背景，可以默认。