zoukankan      html  css  js  c++  java
  • 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 = "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 etconfig.json  中设置  "imageUrlPrefix": "", /* 图片访问路径前缀 */ 

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

  • 相关阅读:
    sqllite小型数据库的使用
    winform打开本地html页面
    【app】自动化必备之adb使用
    【app】自动化环境搭建(Appium)for java
    【app】Hybrid?Native?不知道你就out了!
    589. N叉树的前序遍历
    590. N叉树的后序遍历
    897. 递增顺序查找树
    559. N叉树的最大深度
    108. 将有序数组转换为二叉搜索树
  • 原文地址:https://www.cnblogs.com/hanjun0612/p/9779859.html
Copyright © 2011-2022 走看看