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

简介: ======================================================================   【百度Web富文本编辑器ueditor在ASP.

 

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

 

【百度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:\我们的项目\BetterMIS\project\BetterMIS.WebViews\Content\ueditor\net\fileUp.ashx(34): error CS0433:

  类型“Uploader”同时存在于“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\App_Web_uploader.cs.d026ad6.qqgskfar.dll”

  和“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\assembly\dl3\a6a5387f\ee12af20_0d2ecf01\BetterMIS.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:\我们的项目\BetterMIS\project\BetterMIS.WebViews\Content\ueditor\net\imageUp.ashx(18): error CS0433:

  类型“Config”同时存在于“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\App_Web_config.cs.d026ad6.storkrj4.dll”

  和“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\assembly\dl3\a6a5387f\02a91fba_162ecf01\BetterMIS.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

 

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

 

目录
相关文章
|
23天前
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
59 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
3月前
|
开发框架 前端开发 .NET
VB.NET中如何利用ASP.NET进行Web开发
在VB.NET中利用ASP.NET进行Web开发是一个常见的做法,特别是在需要构建动态、交互式Web应用程序时。ASP.NET是一个由微软开发的开源Web应用程序框架,它允许开发者使用多种编程语言(包括VB.NET)来创建Web应用程序。
72 5
|
4月前
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
371 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
3月前
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
4月前
|
开发框架 JSON .NET
ASP.NET Core 标识(Identity)框架系列(三):在 ASP.NET Core Web API 项目中使用标识(Identity)框架进行身份验证
ASP.NET Core 标识(Identity)框架系列(三):在 ASP.NET Core Web API 项目中使用标识(Identity)框架进行身份验证
|
4月前
|
开发框架 .NET API
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
215 3
|
4月前
Vue3项目引入 vue-quill 编辑器组件并封装使用
本文介绍了如何在Vue3项目中引入并封装使用`vue-quill`富文本编辑器组件,包括安装配置、父页面实现、子组件设计以及使用方法和效果展示。
1177 0
|
4月前
|
存储 前端开发 数据库
神秘编程世界惊现强大架构!Web2py 的 MVC 究竟隐藏着怎样的神奇魔力?带你探索实际应用之谜!
【8月更文挑战第31天】在现代 Web 开发中,MVC(Model-View-Controller)架构被广泛应用,将应用程序分为模型、视图和控制器三个部分,有助于提高代码的可维护性、可扩展性和可测试性。Web2py 是一个采用 MVC 架构的 Python Web 框架,其中模型处理数据和业务逻辑,视图负责呈现数据给用户,控制器则协调模型和视图之间的交互。
43 0
|
4月前
|
开发框架 .NET API
如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?
如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?
227 0