• 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明


    ======================================================================

    【百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明】

                                          ----by 夏春涛 2014-02-20

    ======================================================================

    运行环境:

        ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,ASP.NET MVC3。

        将下载后的ueditor压缩包的所有文件拷贝到/Content/ueditor目录中。

    1.WEB视图页面中如下配置,运行时应能看到完整的富文本编辑器界面:

        <!-- ******************************************************************** -->

        <link rel="stylesheet" href="@Url.Content("~/Content/ueditor/themes/default/css/ueditor.min.css")" type="text/css" />

        <script src="@Url.Content("~/Content/ueditor/ueditor.config.js")" type="text/javascript"></script>

        <script src="@Url.Content("~/Content/ueditor/ueditor.all.min.js")" type="text/javascript"></script>

        <script src="@Url.Content("~/Content/ueditor/lang/zh-cn/zh-cn.js")" type="text/javascript"></script>

        <!-- ******************************************************************* -->

        ..

        @Html.TextAreaFor(p => p.Content)

        ..

        <script type="text/javascript">

            UE.getEditor("Content");//初始化富文本编辑器

        </script>

    2.修改ueditor.config.js内容,在函数第一行增加ueditor目录路径配置,该路径是相对于网站根目录的,

      如是http://www.xxx.com/Content/ueditor/ 则为 /Content/ueditor/。

      配置好后插入图片等操作的对话框显示样式会变得正常。

        window.UEDITOR_HOME_URL = "/Content/ueditor/";

    3.根据需要修改ueditor.config.js内容,以下列举了一些常用项:

       , initialFrameWidth: 760    //编辑器宽度

       , initialFrameHeight: 400   //编辑器高度

       , wordCount: false          //编辑器下方显示控制:不让编辑器统计字数

       , elementPathEnabled: false //编辑器下方显示控制:不显示元素路径

       , autoHeightEnabled: false  //不让编辑自动长高(这样,当内容较多时会出现上下滚动条,而不至于把网页撑大)

    4.解决“检测到有潜在危险的 Request.Form 值”的问题。

      错误提示:

      从客户端(Content="<p><span style="colo...")中检测到有潜在危险的 Request.Form 值。

      原因说明:

      因为富文本编辑器产生的内容中会包含<>"等特殊字符,服务器默认进行内容安全检测并阻止代码运行。

      解决办法:

      为Action添加属性:[ValidateInput(false)],示例:

      [HttpPost]

      [ValidateInput(false)] //不进行内容检测

      public ActionResult NewsEdit(News newsModel)

      {

          //...

      }

    5.★解决文件不能上传的问题。

      错误提示:

      Url: http://localhost:11685/Content/ueditor/net/fileUp.ashx

      Description: e:我们的项目BetterMISprojectBetterMIS.WebViewsContentueditor etfileUp.ashx(34): error CS0433:

      类型“Uploader”同时存在于“c:WindowsMicrosoft.NETFrameworkv4.0.30319Temporary ASP.NET Files oot98d019ee65f02c2eApp_Web_uploader.cs.d026ad6.qqgskfar.dll”

      和“c:WindowsMicrosoft.NETFrameworkv4.0.30319Temporary ASP.NET Files oot98d019ee65f02c2eassemblydl3a6a5387fee12af20_0d2ecf01BetterMIS.WebViews.DLL”中。

      解决办法:

      ueditor的net文件夹下的Uploader.cs文件的生成操作属性默认是“编译”,只需要将这个文件的生成操作属性改为“内容”,

      上传图片的功能就可以正常成功使用了![源自:http://www.cnblogs.com/beyond1983/archive/2013/02/26/2933744.html]

      原因剖析:

      因为Ueditor的示例是针对Asp.net网站(不是MVC),不需要编译成DLL,直接把示例放到IIS下就可以使用啦。

    6.★解决上传图片时总提示“选择保存目录:正在读取目录...”的问题。

      问题现象补充:如果选择本地图片后,点击“开始上传”总是提示“请等待保存目录就绪”。

      错误提示:

      Url: http://localhost:11685/Content/ueditor/net/imageUp.ashx?fetch=1

      Description: e:我们的项目BetterMISprojectBetterMIS.WebViewsContentueditor etimageUp.ashx(18): error CS0433:

      类型“Config”同时存在于“c:WindowsMicrosoft.NETFrameworkv4.0.30319Temporary ASP.NET Files oot98d019ee65f02c2eApp_Web_config.cs.d026ad6.storkrj4.dll”

      和“c:WindowsMicrosoft.NETFrameworkv4.0.30319Temporary ASP.NET Files oot98d019ee65f02c2eassemblydl3a6a5387f2a91fba_162ecf01BetterMIS.WebViews.DLL”中。

      解决办法(原因同上):

      ueditor的net文件夹下的Config.cs文件的生成操作属性默认是“编译”,只需要将这个文件的生成操作属性改为“内容”。

    7.★解决无法正常显示刚刚上传的图片的问题。

      问题现象:

      成功上传一张图片,插入到编辑器中,但是无法正确显示刚刚上传的图片。

      原因剖析:

      查看html源码可以发现图片路径中,upload1后面有2个/,手动删除一个后,返回查看,图片可以正常显示了。

      解决办法1:

      在imageUp.ashx文件中找到代码:

      info = up.upFile(context, path + '/', filetype, size);

      把把+'/'给删除掉,即:

      info = up.upFile(context, path, filetype, size);

      解决办法2:

      在Uploader.cs文件中找到代码(在upFile函数中):

      pathbase = pathbase + "/";

      修改为:

      pathbase = pathbase.TrimEnd('/') + "/";

      这样,可以彻底解决类似问题,因为ueditor的上传功能都是调用Uploader类实现的。

    8.修改上传文件的路径:

      (1)图片上传路径。修改Config.cs文件:

           将

           public static string[] ImageSavePath = new string[] { "upload1", "upload2", "upload3" };//即ueditor/net/upload1等目录

           改为:

           public static string[] ImageSavePath = new string[] { "upload/image" };//即图片上传到ueditor/net/upload/image目录中

           另,对于【图片搜索】中的图片保存路径。修改getRemoteImage.ashx文件:

           将

           string savePath = "upload/";

           改为:

           string savePath = "upload/image/"; //即图片保存到ueditor/net/upload/image目录中

           补充说明:对于【图片搜索】中的图片保存,系统会自动在savePath目录下再以日期为名创建文件夹来保存文件。

      (2)附件(及视频文件)上传路径。修改fileUp.ashx文件:

           将

           String pathbase = "upload/";

           改为:

           String pathbase = "upload/file";//即附件上传到ueditor/net/upload/file目录中

      (3)涂鸦上传路径。修改scrawUp.ashx文件:

           一是将

           string pathbase = "tmp/";  

           改为:                 

           string pathbase = "upload/tmp/";

           二是将

           string pathbase = "upload/";           

           string tmpPath = "tmp/";                   

           改为:

           string pathbase = "upload/scraw/";

           string tmpPath = "upload/tmp/";

           补充说明:系统会自动在pathbase目录下再以日期为名创建文件夹来保存文件。

    9.注意将upload目录的访问权限放开(右键文件夹->属性->安全->编辑,即可设置),允许everyone用户完全控制(当然安全一点应该只允许IIS_WPG账户完全控制即可)。

    ======================================================================

                                      ----by 夏春涛 20140220

    ======================================================================

  • 相关阅读:
    Vue 面试题汇总
    SSIS 通过OData源连接Dynamic 365 Online
    SQL Server AlwaysOn
    SQL Server AlwaysOn
    SQL Server AlwaysOn
    SQL Server AlwaysOn
    OGG同步ORACLE至SQLSERVER(转)
    Power BI Online管理数据源
    SSRS 动态设置分组依据及行组个数
    查看Reporting Services服务器中用户查询报表历史记录
  • 原文地址:https://www.cnblogs.com/SummerRain/p/4783506.html
Copyright © 2020-2023  润新知