• 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");//获取提交的编辑信息

        }

  • 相关阅读:
    [atARC100F]Colorful Sequences
    [atARC103D]Robot Arms
    [atARC107F]Sum of Abs
    [atAGC047F]Rooks
    [loj3278]收获
    [cf809E]Surprise me
    [cf997E]Good Subsegments
    [cf603E]Pastoral Oddities
    Codeforces Round #453
    Educational Codeforces Round 32
  • 原文地址:https://www.cnblogs.com/shouwu/p/4293347.html
Copyright © 2020-2023  润新知