• ASP.NET MVC 5 中 使用富文本编辑器 Ueditor


    一、Ueditor插件下载自:http://ueditor.baidu.com/website/

    二、将解压文件目录ueditor复制到项目根目录后,

      修改以下几个文件配置:

        1.访问路径配置:ueditor.config.js

          //为编辑器实例添加一个路径,这个不能被注释

          UEDITOR_HOME_URL: "http://localhost:4458/ueditor/"

          // 服务器统一请求接口路径
          , serverUrl: URL + "/net/controller.ashx"

        2.上传文件相关配置config.json

          "imageUrlPrefix": "/ueditor/net/", /* 图片访问路径前缀 */
          "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    三、前台添加使用

      1.引用脚本

        <script type="text/javascript" src="~/Scripts/ueditor/ueditor.config.js" />

        <script type="text/javascript" src=""~/Scripts/ueditor/ueditor.all.js  />

        添加至BundleConfig,

          bundles.Add(new ScriptBundle("~/bundles/ueditor").Include(

          "~/Scripts/ueditor/ueditor.config.js",

          "~/Scripts/ueditor/ueditor.all.js"));

        在前台引用

          @section Scripts {

            @Scripts.Render("~/bundles/jqueryval")
            @Scripts.Render("~/bundles/ueditor")
          }

      2.将如下代码添加富文本输入框位置:

        <script id="Location" type="text/plain" style="200px;height:100px;">
        </script>

      3.初始化

        <script type="text/javascript">

          var ue = UE.getEditor('Location');

        </script>

      4.前台显示

        @Html.Raw(item.Location)

    三、后台获取提交

        1、提交的Action要取消验证,即添加ValidateInput(false)


          [ValidateInput(false)]
          public ActionResult Create([Bind(Include = "LastName,FirstMidName,HireDate,OfficeAssignment")] Instructor instructor, FormCollection fc,             string[] selectedCourses){

          …………

              if ( fc != null && fc.Get("Location") != null)

              string strdata= fc.Get("Location");//获取提交的编辑信息

        }

  • 相关阅读:
    元旦晚会
    CF906D Power Tower
    基于51单片机的多功能秒表(校赛作品)
    集训队第二次排位赛
    《史记》——五帝本纪第一,黄帝部分
    原创,让你的 "Ajax"请求华丽转身,给 "body" 或是 "Div" 加上Loading遮罩!
    Excel导出通用操作方式
    图片(img标签)的onerror事件,你有用过嘛?
    @Url.ActionLink 和 @Url.Action
    原创,自己做的一个简单实用的提示小插件,兼容性很好,基本上都兼容!
  • 原文地址:https://www.cnblogs.com/shouwu/p/4293347.html
Copyright © 2020-2023  润新知