开启FCKeditor编辑器的图片上传功能及解决图片路径问题

 更新时间:2016年9月20日 18:58  点击:1881
开启FCKeditor编辑器的图片上传功能及解决图片路径问题,有需要的同学可参考一下。

1. 打开网站后台编辑器里的admin/editor/fckconfig.js这个文件

找到FCKConfig.ImageUpload = false 这句,把false改成true就行啦。

FCKConfig.ImageBrowser = false ; 这里也同样把false改成true

2. 看一下admin/editor/editor目录下面的filemanager文件夹是否存在,如果不在就去下载一个2.6.3版本以上的fck编辑器,把里面的filemanager文件夹复制过来。当然这里是ASP的,所以其他语言像PHP什么的文件夹可以删除。

3. 接下来设置文件上传的路径,打开admin/editor/filemanager/connectors/asp文件夹的config.asp这个文件进行如下设置

ConfigIsEnabled = True 是否开启上传功能

ConfigUserFilesPath = “../../../../../uploads/” 文件上传目录,相对于该文件夹

这里要重点指出的ConfigUserFilesPath = “../../../../../uploads/”这里如果这样设置,我最后发现两个问题

 

A. ConfigUserFilesPath = “../../../../../uploads/”这样设置虽然图片可以上传,但插入编辑器里的图片路径是有问题的,所以我试了很多次最后把它改成ConfigUserFilesPath = “/uploads/”就可以了。如果您的网站是放在下级文件夹里也可以这样设置ConfigUserFilesPath = “文件夹名称/uploads/”。

B. 至于第二个问题,我感觉好奇怪,FCKeditor编辑器的图片路径会出现两个斜杠//,虽然图片也能显示,但看起来总归不舒服。请打开admin/editor/editor/ filemanager/connectors/asp文件夹里的,io.asp这个文件,请把:

function CombinePaths( sBasePath, sFolder)

CombinePaths = RemoveFromEnd(sBasePath, "/") & "/" & RemoveFromStart( sFolder, "/")

end function

改成

function CombinePaths( sBasePath, sFolder)

sFolder = replace(sFolder, "", "/")

CombinePaths = RemoveFromEnd(sBasePath, "/") & "/" & RemoveFromStart( sFolder, "/")

end function

4. 最后设置上传后的图片自动改名,请打开admin/editor/editor/ filemanager/connectors/asp文件夹里的commands.asp这个文件

在文件中添加如下语句

dim rannum

dim dtnow

dim getnewfilename

dtnow=now()

randomize

rannum=int(90*rnd)+10

getnewfilename=year(dtnow) & right("0" & month(dtnow),2) & right("0" & day(dtnow),2) & right("0"& hour(dtnow),2) & right("0”"& minute(dtnow),2) & right("0" & second(dtnow),2) & rannum

并将

sFileName = ouploader.file("newfile")name

改为

sFileName = getnewfilename &"."& split(ouploader.file("newfile").name,".")(1)
完成效果.:

OK 是服务器返回的信息,非ckeditor自带.



最后,如果能在上传成功后直接调用Info的onChange方法的话,是最完美的..可是我始终调用不了这个方法...

完毕,各位自己去测试吧. 另在image.js中有些方法也可以自己改动,如onOK-->表示在点击确定时会触发的方法

业务需要把一个html页面中的内容导出到excle文件里面,一个常用的方法是在需要导出的jsp页面中增加:
 代码如下 复制代码

response.setContentType("application/vnd.ms-Excel; charset=gb2312");

response.setHeader("Content-disposition","attachment;filename=excel文件名.xls");

但是经常遇到会把身份证等数字比较长的数据改成科学计数法来显示。


用IE的用户,如果一个html页面有table的话,可以把table导出到excle文件里面,但是经常遇到会把身份证等数字比较长的数据改成科学计数法来显示。很是头疼。
有说加个单引号可以解决,但是我这里测试,显示和导出的结果都有单引号。效果不好。
同事找到一个解决方案比较好。


在html页面里面加上一段css
然后在出现问题的字段应用这种style就可以了。
测试通过。神奇

 代码如下 复制代码

<style type="text/css">
<!--
td {
    background-color: #FFFFFF;
}
 
.txt
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:black;
    font-size:11.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:宋体;
    mso-generic-font-family:auto;
    mso-font-charset:134;
    mso-number-format:"@";
    text-align:general;
    vertical-align:middle;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:nowrap;}
-->
</style>

原来css还有这种功效啊,把上面代码放在要导入的html页面中就解决的了这些办法。

网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。

其作用根据不同的重新浏览方式分为以下几种情况:
(1) 打开新窗口
如果指定cache-control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如:
Cache-control: max-age=5
表示当访问此网页后的5秒内再次访问不会去服务器
(2) 在地址栏回车
如果值为private或must-revalidate(和网上说的不一样),则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。
(3) 按后退按扭
如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问
(4) 按刷新按扭
无论为何值,都会重复访问当指定Cache-control值为“no-cache”时,访问此页面不会在Internet临时文章夹留下页面备份。
另外,通过指定“Expires”值也会影响到缓存。例如,指定Expires值为一个早已过去的时间,那么访问此网时若重复在地址栏按回车,那么每次都会重复访问:
Expires: Fri, 31 Dec 1999 16:00:00 GMT

现在我们用的fckeditor己经更名为了ckeditor,本文章来告诉如何修改ckeditor上传文件路径这个问题,有需要的朋友可以简单的参考一下。

至于 Unable to find an image manipulation component错误,原因很可能是生成缩略图的代码在.net framework4.0 版本上有点问题,除了要对ckfinder/userfiles文件夹赋予everyone完全控制权限,并根据千一网络的解决办法
· 若不使用缩略图功能:直接把 config.asp 中的 Thumbnails.Add "enabled", true 的第二个参数改为 false。

· 若要使用缩略图功能:可安装 ASP.NET 1.1/2.0 或 AspJpet 或 ASPImage 2 或 ASPThumb。对于 ASP.NET:

o 如果有错误,根据说明改 web.config 和 config.asp 中的 CKFinderTempPath 路径(注意以“”结尾,并且在 web.config 中,要用“\”代替“”);

o 如果还有错误,那么您就在浏览器中直接访问 http://.../ckfinder/core/connector/asp/loopback.aspx 看看能不能运行 ASP.NET,我遇到过一个错误就是 .NET 版本原因造成的,请参见 .NET Framework 4.0 无法运行 2.0 的 ASP.NET 程序解决。说明,若显示“403 - Forbidden”,说明 ASP.NET 已经运行起来了。

我自己修改的时候是所设置的路径值必须一样,如CKFinderTempPath =":外师外语系webckfinderuserfiles”,web.config的value也是一样,但我自己的电脑的这个问题能很好解决,而另一台服务器还依然有问题,郁闷之后由于赶时间还是乖乖的换成了fckeditor2.6.5,这回又涉及到了路径问题,因为默认的设置是基于网站根目录,根本不能适应随地使用的需要,花了好多功夫最后找到了一个解决办法,:

' 存放图片路径依然是基于站点,

 代码如下 复制代码

Dim ConfigUserFilesPath
ConfigUserFilesPath = "/web/web1/userfiles/"

一个高的写的添加X-UA-Compatible标签,提示用户安装GFC, 兼容 IE浏览器的方法,有需要的朋友参考一下。

源码中添加:

 代码如下 复制代码

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。

这样写可以达到的效果是如果安装了Google Chrome Frame(谷歌内嵌浏览器框架GCF),则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。

Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。

标记用法(给网站添加X-UA-Compatible标签):

1.最基本的用法:在页面的头部加入

 代码如下 复制代码

<meta http-equiv=”X-UA-Compatible” content=”chrome=1″ />

用以声明当前页面用chrome内核来渲染。

复杂一些的就是本文一开始看到的那中用法:

 代码如下 复制代码

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。

使用CFInstall.js检测当前的IE浏览器是否安装了GCF?

利用IE的奇怪特性,如果DOM字典里不存在此标签,可使用js的document.createElement来创建,它就会添加到DOM字典里即可识别;

淘宝是添加注释的时候

 代码如下 复制代码

<!–[if IE]>
 <script src=”http://a.tbcdn.cn/p/fp/2011a/html5.js”></script>
 <![endif]–>

我是这样写的:

 代码如下 复制代码
<!–[if IE]>
 <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js”></script>
 
 <style>
 .chromeFrameInstallDefaultStyle {
 /* default is 800px width: 800px; */
 border: 5px solid blue;
 .chromeFrameOverlayContent
 .chromeFrameOverlayContent iframe
 .chromeFrameOverlayCloseBar
 .chromeFrameOverlayUnderlay
 }
 </style>
 
 <script>
 // The conditional ensures that this code will only execute in IE,
 // Therefore we can use the IE-specific attachEvent without worry
 window.attachEvent(“onload”, function() {
 CFInstall.check({
 mode: “overlay”,
 node: “prompt”,
 destination: “http://clin003.com”
 });
 });
 
 </script>
 <![endif]–>

以上代码可以自动检测是否安装了GCF,如果没安装,则会提示用户安装,安装完成后,或自动跳转到http://www.111cn.net。

更详细可以参考

chrome的开发文档 Chrome Frame: Developer Guide

微软官方文档 Specifying Document Compatibility Modes

X-UA-Compatible是IE8的专用标记,它告诉IE8采用何种IE版本去渲染网页(比如人见人烦的IE6)。不过在IE6测试的时候也是能够“提示用户安装GFC”的。
IE版本:ie6.0.0.2900.5512.xpsp_sp3_gdr.101209-1647
ie6.0.0.2900.5512.xpsp_sp3_gdr.101209-1647

IE6下提示用户安装GFC页面

CFInstall.check

安装成功后自动转到指定页面,看到chrome渲染效果

 

[!--infotagslink--]

相关文章

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19
  • C#从数据库读取图片并保存的两种方法

    这篇文章主要介绍了C#从数据库读取图片并保存的方法,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2021-01-16
  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13
  • python opencv通过4坐标剪裁图片

    图片剪裁是常用的方法,那么如何通过4坐标剪裁图片,本文就详细的来介绍一下,感兴趣的小伙伴们可以参考一下...2021-06-04
  • 使用PHP下载CSS文件中的图片的代码

    共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04
  • PHP swfupload图片上传的实例代码

    PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
  • C#中图片旋转和翻转(RotateFlipType)用法分析

    这篇文章主要介绍了C#中图片旋转和翻转(RotateFlipType)用法,实例分析了C#图片旋转及翻转Image.RotateFlip方法属性的常用设置技巧,需要的朋友可以参考下...2020-06-25
  • Photoshop枪战电影海报图片制作教程

    Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
  • OpenCV如何去除图片中的阴影的实现

    这篇文章主要介绍了OpenCV如何去除图片中的阴影的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-29
  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
  • ps怎么制作图片阴影效果

    ps软件是现在很多人比较喜欢的,有着非常不错的使用效果,这次文章就给大家介绍下ps怎么制作图片阴影效果,还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
  • C#将图片和字节流互相转换并显示到页面上

    本文主要介绍用C#实现图片转换成字节流,字节流转换成图片,并根据图片路径返回图片的字节流,有需要的朋友可以参考下...2020-06-25
  • 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
  • 百度编辑器ueditor修改图片上传默认路径

    本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
  • JavaScript 如何禁止用户保存图片

    这篇文章主要介绍了JavaScript 如何禁止用户保存图片,帮助大家完成需求,更好的理解和使用JavaScript,感兴趣的朋友可以了解下...2020-11-19
  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
  • php上传图片学习笔记与心得

    我们在php中上传文件就必须使用#_FILE变量了,这个自动全局变量 $_FILES 从 PHP 4.1.0 版本开始被支持。在这之前,从 4.0.0 版本开始,PHP 支持 $HTTP_POST_FILES 数组。这...2016-11-25