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

  • 相关阅读:
    递归--数字黑洞--蓝桥杯
    王、后问题
    递归--简单题--求二项式值
    有问题的题
    LeetCode----994. 腐烂的橘子「深度优先搜索」
    SpringBoot ---- MyBatis Plus 入门
    Spring Boot ---- 整合 MyBatis (注解方式)
    Android笔记
    LeetCode----跳跃游戏Ⅱ「动态规划」
    2020年米哈游秋季招聘程序 B卷编程题
  • 原文地址:https://www.cnblogs.com/hanjun0612/p/9779859.html
Copyright © 2011-2022 走看看