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