福州seo|福建seo >> 福州SEO优化 >> Asp.Net环境下如何正确使用Ueditor编辑器

Asp.Net环境下如何正确使用Ueditor编辑器

作者:SEO技术 分类: 福州SEO优化 发布于:2015-7-24 23:46 ė682次浏览 60条评论
  Ueditor编辑器是百度提供的开源富文本编辑器,功能各方面还比较全面。一开始选择Ueditor编缉器是经朋友推荐,朋友都说他的功能强大,个人也看中他是大公司产品,用完之后觉得还凑合吧,存在的问题也不少,最主要的还是产品存在一此明显的BUG,说明文档少的可怜,不花点时间还真搞他不定。以下结合程序猿SEO的使用为大家讲解一下Ueditor编缉器在.net环境下的合用。


   一、最大的使用误区是直接将Ueditor编辑器引入到.net项目当中:

   在.net项目中使用Ueditor编缉器不了解的朋友可能都会习惯性的将Ueditor编缉器开发包引入到项目当中,这可能会是灾难性的,不止是使用的朋友,对Ueditor编缉器开发组也是一样。使用的朋友可能会因此浪费不少时间纠结在Ueditor编缉器的配置上面;对于Ueditor编缉器开发组可能会因为缺少说明而损失不少的用户,建议他们多花点时间在说明文档上面。正确的做法是不能将Ueditor编辑器引入到.net项目当中。


   将Ueditor编缉器开发包引入到项目当中会出现啥情况:1、Asp.Net WebForm开发模式下引入Ueditor编缉器,配置好后,在本地调试时一切正常,编译后放到服务器上面表面正常,在使用上传截屏功能时就杯具了,怀疑的原因也比较多,如路径不正确、权限问题等,搞来搞去也没搞好。2、Asp.Net MVC模式下引入Ueditor编缉器,在MVC模式下引入Ueditor编缉器放的位置也是有讲究的,最好放在Content或Scripts文件夹下面,放在Views、Models、Controllers文件夹下都会出问题,什么问题就不是我们讨论的重点了。自以为很聪明将Ueditor编缉器引入到了项目中,运行时就杯具了。
Asp.Net Mvc模式下:编译提示Uploader类重复包含在中。



   也有可能会提示以下错误:



   对于上面这种情况有朋友给出了解决办法就是将

<%@ Assembly Src="Uploader.cs" %>
   这句代码去掉,就可以正常使用上传功能了。但是我们有更好的办法,就是不要将Ueditor编缉器从.net项目中排除或者不要引入进来。




   解决掉我们的问题后,大家一定存在疑问为什么不能将Ueditor编缉器引入到项目当中?其实上面的问题让我记忆犹新,因为以前用过kindeditor编缉器的.net版,也存在这样的问题。如果是纯js的编缉器应该不会存在上述问题,但是Ueditor/kindeditor编缉器的上传功能用到了后台程序来实现上传。Ueditor使用的是.ashx一般处理程序。

在程序员开发程序进行调试时,就算将Ueditor编缉器文件包含在项目中应该也是没有问题的,但是发布网站然后上传致服务器后就出现问题了。因为.net在发布网站时会将.cs文件预编译致.dll文件当中。在上图中的Uploader.cs在经过网站发布后就会不存在了,面被编译到了.dll文件当中。其他.ashx文件再通过

<%@ Assembly Src="Uploader.cs" %>
这样来包含Uploader.cs就会出错了,因为在同.ashx文件同一目录下已经找不到Uploader.cs文件了。这下明白为什么了吧。之前调试时提示多处包含Uploader.cs也是因为发布后.dll中包含有Uploader.cs的类所导致的。

   二、Ueditor编缉器上传功能配置:

   ueditor编缉器上传功能的路径配置是ueditor编缉器使用中最难上手的地方,解决好了基本上使用起来就不成问题。我使用的Ueditor编缉器是1.2.5.1版,最近更新了1.2.6版,上官网看到许多文件连名字都改了,借一位网友的话来说就是“尼妈的,随随便便的改,让我们这些做二次开发的情何以堪”。因为许多配置啥的自己都改好了,就不去升级了不趟那趟混水了。

   1、在初次使用Ueditor编缉器时,由于不熟悉只会通过editor_config.js中的选项来配置摸索上传功能的路径配置。editor_config.js中对上传路径的配置主要有以下两个地方。

  下面以本地图片上传功能的配置来说明如何配置,其他功能的配置基本一致。例如我的ueditor文件放在根目录/Scripts/ueditor/目录下,再看如下图片上传后台imageUp.ashx路径组成:



此处配置我们推荐大家使用相对路径,帮得出URL为:“/Scripts/ueditor/”当然你也可以配置成为你网站的绝对路径,但是那样不利于开发调试,也不利于日后网站转移。

   图片配置区中还有个参数数叫imagePath注释对他的功能解释是,“图片修正地址”,很久才搞清楚是啥意思。当网站调用后台imageUp.ashx上传文件后,我们在不改动后台程序的情况下,会将图片存放在/net/upload/2013-06-13/这样的目录下,2013-06-13指的是当前日期,会随着日期不同而改变。在上传完成后系统会返回/upload/2013-06-13/xxx.jpg这样的图片路径,但是对于页面来说它有可能不是一个完整的路径,所以我们需要通过imagePath这个参数来修正或者说完善这个图片路径为一个正确的路径。致于imagePath是什么内容需要视你网站的结构以为使用的页面而定。


   2、学以致用,实现多个上传目录:

   由于Ueditor编缉器的上传路径默认是以后台上传处理文件来决定的,不可以通过配置文件进行设置,这应该是上传功能美中不足的地方,1、不能随意定义上传路径;2、不能有多个上传路径。但是我自己在做工项目时就确实有这样的需求。如:某些图片是长期保存的,我相把他放在一个目录下,有些图片是临时的,过一段时间可以将其删除。如果把图都放在一起,到时候就无法清除了。这样的需求就决定了需要多个上传路径,多个路径也意味着要自定义上传路径。

刚才说到后台保存文件是相对后台文件所在目录而进行保存的。那么我们要实现多个路径保存文件,能不能通过拷贝多份后台文件来实现呢?抱着试一下的态度,我测试了一下,当然是成功了,不然我也不会和大家说。拷贝多一份后台.ashx文件后,如何才能让编缉器调用准确的后台文件呢?

   以图片上传为例:之前提到,editor_config.js中对上传路径的配置主要有两个地方。一是全局路径配置参数:URL,还有就是各个上传功能的各自配置参数如图片上传的:imageUrl和imagePath,由于URL参数是全局的,修改它会影响到其他功能。我的目的只需要修改图片上传功能的后台处理文件的路径,所以我们不调整URL参数,而是通过修改imageUrl和imagePath参数实现。由于默认配置只能有一个,所以我们不能修改原来的默认配置,只能通过Ueditor编缉器初始化时来修改这两个参数。代码如下所示:

<script language="javascript" type="text/javascript">
     UE.getEditor("myEditor", {imageUrl: "http://域名/路径/imageUp.ashx", imagePath: "http://域名/路径/"});
</script>
这里imageUrl和imagePath参数作者是选择了使用绝对路径,当然使用相对路径也是可以的,只要搞清当前路径是什么,再通过“../”转到后台处理文件所在的路径就可以了。


   3、随心所欲,实现上传目录自定义:

   通过移动.ashx后台处理文件的路径来达到自定义保存目录显然是不够灵活,下面我们介绍通过修改.ashx文件来达到自定义保有存目录,仍然是以图片上传为例子,我们能过修改后台保存的路径来达到自定义保存目录的目的。如下图所示所示:

  由于程序猿SEO此处用的是相对于根目录的完整相对路径,所以返回图片路径的地址也无需修正了,可以将imagePath参数配置为空。



   上传路径配置就说到这里,下面再给提提Ueditor编缉器的BUG,希望我这编文章到时候够出名,能让开发人员看到把他修正。因为已经更新了几个版本都没有更正。

   1、远程图片远程抓取保存的BUG,看代码:

(getRemotoImage.ashx文件)


从上图看出问题了吧,其判断路径径是否存在判断的时/upload/而用的路径划/upload/2013-06-14/的形式,当某天第一次使用远程捉取图片时,最会出现问题了,由于日期文件夹未创建,而导致捉取出错。当然如果你先使用本地上传功能,则不会出现此问题,因为本地上传会正确创建日期文件夹。这可能也是导致这个BUG这么久也没有修正的原因。

   正确的代码应为:

文件夹不存在时,正确创建文件夹。
   2、第三方代码高亮插件,不支持多行代码自动换行或者行号不对应,美中不足。

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部