ueditor 使用

之前在微信上用到富文本编辑器，选用了ueditor

之后又在项目中使用到了，因此打算写下来记录一下。

 

1  首先去下载ueditor

2  我的是 MVC项目，贴一下：粘贴到Content下

 

 

3 然后在 BundleConfig中配置 css以及 js的虚拟路径

 

//Editor
            bundles.Add(new ScriptBundle("~/Content/ueditor").Include(
                "~/Content/ueditor/ueditor.config.js",
                "~/Content/ueditor/ueditor.all.js"));

 

 

 

 

 

4 创建 View并使用

 

@Scripts.Render("~/Content/ueditor")
<div>

            @Html.TextAreaFor(model => model.htmlStr, new { id = "editor", style = "width:100%;height:500px;" })
        </div>

<script>

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    //var ue = UE.getEditor('editor');
    var editor = new baidu.editor.ui.Editor({
        UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径
        iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径
        initialContent: "",//初始化编辑器内容
        autoHeightEnabled: true,//高度自动增长
        minFrameHeight: 500//最小高度
    });
    editor.render('editor');
</script>

5 后台接收

 

 

[ValidateInput(false)]
        [HttpPost]
        public ActionResult Edit(string htmlStr)
        {
            
            //这里的htmlStr  是带有 html标签的内容
            return View();
        }

 

 

效果如下：

 

 

 

PS: 图片的上传路径设置，ueditor\net\config.json  中设置  "imageUrlPrefix": "", /* 图片访问路径前缀 */ 

不填写则为相对路径。一般如果发布到iis去，可以填写一下网站域名例如http://www.baidu.com