.net怎么把html的图片html网页上传到服务器器

博客分类:
&%@ page language="java" contentType="text/ charset=UTF-8"
pageEncoding="UTF-8"%&
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&img id="image" src="" /&
&input type="file" id="file"
onchange="selectImage(this);" /&
&input type="button" onclick="uploadImage();" value="提交" /&
//js进行图片预览 使用input标签来选择图片,使用FileReader读取图片并转成base64编码,然后发送给服务器。
var image = '';
function selectImage(file) {
if (!file.files || !file.files[0]) {
var filepath = document.getElementById("file").
//为了避免转义反斜杠出问题,这里将对其进行转换
var re = /(\\+)/g;
var filename=filepath.replace(re,"#");
//对路径字符串进行剪切截取
var one=filename.split("#");
//获取数组中最后一个,即文件名
var two=one[one.length-1];
//再对文件名进行截取,以取得后缀名
var three=two.split(".");
//获取截取的最后一个字符串,即为后缀名
var last=three[three.length-1];
if(last!="jpg"){
alert("请您上传jpg格式的图片!");
var reader = new FileReader();
reader.onload = function(evt) {
document.getElementById('image').src = evt.target.
image = evt.target.
reader.readAsDataURL(file.files[0]);
function uploadImage() {
type : 'POST',
url : 'uploadImageAjax?t_number=',
//请求路径以及传值
image : image
//这里传递的是base64编码
async : false,
dataType : 'json'
&script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"&&/script&
package com.
import java.io.FileOutputS
import java.io.IOE
import java.io.OutputS
import java.sql.C
import javax.servlet.ServletE
import javax.servlet.annotation.WebS
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.dao.TeacherD
import com.util.DbU
import sun.misc.BASE64D
public class UploadImageAjaxServlet extends HttpServlet {
DbUtil dbUtil = new DbUtil();
TeacherDao teacherDao = new TeacherDao();
String base64 =
String t_number =
String filePath = "h:\\Image\\";
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置字符编码为UTF-8,支持汉字显示
response.setCharacterEncoding("UTF-8");
String t_number = request.getParameter("t_number");
// 上传文件路径
base64 = request.getParameter("image");// 接受图片的Base64编码
System.out.println(base64);
GenerateImage(base64, filePath + t_number + ".jpg");
* 从Base64编码转换为图片文件
* @param imgStr
* @param imgFilePath
public static boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进行Base64解码并生成图片
// 只允许jpg
String header ="data:image/base64,";
// 去掉头部(必须加这个,不然图片传输数据错误)
imgStr = imgStr.substring(header.length());
if (imgStr == null) // 图像数据为空
BASE64Decoder decoder = new BASE64Decoder();
// Base64解码
byte[] bytes = decoder.decodeBuffer(imgStr);
for (int i = 0; i & bytes. ++i) {
if (bytes[i] & 0) {// 调整异常数据
bytes[i] += 256;
// 生成jpeg图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(bytes);
out.flush();
//System.out.println("1");
out.close();
} catch (Exception e) {
&?xml version="1.0" encoding="UTF-8"?&
&web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"&
&display-name&TeacherInfoManage&/display-name&
&welcome-file-list&
&welcome-file&login.jsp&/welcome-file&
&/welcome-file-list&
&servlet-name&uploadImageAjaxServlet&/servlet-name&
&servlet-class&com.servlet.UploadImageAjaxServlet&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&uploadImageAjaxServlet&/servlet-name&
&url-pattern&/uploadImageAjax&/url-pattern&
&/servlet-mapping&
&/web-app&
浏览: 50377 次
来自: 长沙
cs6641468 写道同学, 建议还是看看官方文档。你肯定是 ...
cs6641468 写道同学, 建议还是看看官方文档。你肯定是 ...
同学, 建议还是看看官方文档。你肯定是百度找了一些抄来抄去过时 ...
push方法返回的不是移除去的对象吧? 移除的应该是前面和现在 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'没有更多推荐了,
不良信息举报
举报内容:
从HTML上传图片到AFNetWorking上传图片代码浅析
举报原因:
原文地址:
原因补充:
最多只允许输入30个字
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器
摘要:之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端。我的思路是:一、引用第三方js在前端把table转成图片二、通过ajax把图片上传到服务器,保存在指定文件夹三、浏览器根据文件名从服务器端获取图片一、引用第三方js在前端把table转成图片一开始我在百度找到了比较多人用过的html2canvas,据说很多坑,但由于这些坑都是几年前被发现的,我觉得现在更新了这么多个版本应该没啥问题了吧。考虑到稳定性,我下载了0.4.1版本,还真的有坑,只能把
之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端。
我的思路是:一、引用第三方js在前端把table转成图片
二、通过ajax把图片上传到服务器,保存在指定文件夹
三、浏览器根据文件名从服务器端获取图片
一、引用第三方js在前端把table转成图片
一开始我在百度找到了比较多人用过的html2canvas,据说很多坑,但由于这些坑都是几年前被发现的,我觉得现在更新了这么多个版本应该没啥问题了吧。考虑到稳定性,我下载了0.4.1版本,还真的有坑,只能把可视区域内的html给转换出来,毕竟我的表格数据多变,这种效果肯定是不行的。
经过了一轮的百度,我从一位大神的贴子中找到了解决方法,需要0.5.0版本,使用html2canvas实现浏览器截图。解决方法是修改一小段源码,通过设置截图区域的width和height来截取内容,于是我把width和height分别附上table的div的宽和高,出来的效果是——还是差一点,虽然能突破了只能在可视区域截取内容的障碍,但是再截图区域的宽高设置上还得手动给它加个几十像素去让它截取完整,这样肯定会出bug。
一番折腾后,我放弃了这个插件了,不好用。转战谷歌,看看有啥更好地第三方插件
功夫不负有心人,它就是——dom-to-image
dom-to-image介绍
这是一个与html2canvas功能差不多的第三方js插件,能够把dom节点转换为矢量图(svg)和位图(png和jpeg),完美解决了html2canvas出现过的坑。
使用的代码如下(转成png): var node = document.getElementById('table');domtoimage.toPng(node) .then(function (dataUrl) {var img = new Image();img.src = dataUdocument.body.appendChild(img); });
无论我的表格有多大,它都能全部获取到,图片稍微失真。
二、通过ajax把图片上传到服务器,保存在指定文件夹
我发现dom-to-image返回的png图片是通过Base64编码的,表现的方式基本如下: data:image/base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAsZCykDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/
需要在后台进行解码才能保存为文件(需要注意的是,把“data:image/base64”去掉再进行解码,否则生成的文件会提示已损坏) /** * 转换url:data数据为正常图片 * @param dataUrl Base64编码的图片 * @return 返回文件名 */ public static String GetDataUrlPic(String dataUrl){String ID = RandomGUID.getGUID();String imgName = &table-& + ID + &.png&;String imgPath = getImgPath();if(GenerateImage(dataUrl,imgName,imgPath)){return imgN}return &&; }/** * 把转换后的图片存放到指定目录 * @param imgStr dataUrl * @param imgName 图片名称 * @param imgPath 存放路径 * @return */ public static boolean GenerateImage(String imgStr,String imgName,String imgPath){//把“data:image/base64”去掉,imgStr = imgStr.substring(imgStr.indexOf(&,&) + 1);if (imgStr == null) {} BASE64Decoder decoder = new BASE64Decoder();try {// Base64解码byte[] b = decoder.decodeBuffer(imgStr);for (int i = 0; i & b. ++i) { if (b[i] & 0) {// 调整异常数据b[i] += 256; }}File headPath = new File(imgPath);if (!headPath.exists()) { headPath.mkdirs();}String imgFilePath = imgPath + &/& + imgNOutputStream out = new FileOutputStream(imgFilePath);out.write(b);out.flush();out.close();} catch (Exception e) {} }
但是问题来了,当我的表格数据多的时候,发现导出来的图片已损坏。原因是字符串过长提交失败,网上的说法也不一致,有的说post限制2m的提交,要更改服务器配置(本人用的tomcat);也有说post无限制,无需修改。修改配置的方法我试过,没效果,无需修改?明明不行啊……
经过多次的尝试,我发现转成Blob图片后使用ajax传输到后台并不会出现上述问题。而且用原生的ajax并非jquery封装过的ajax,代码如下: var node = document.getElementById('table');var responseTdomtoimage.toBlob(node).then(function (blob) {var xhr = new XMLHttpRequest();xhr.open('POST', '/test', true);xhr.onreadystatechange = function(){ if(xhr.readyState == 4 &;&; xhr.status == 200){ responseText = xhr.responseTif(responseText != &&){
//拼servlet地址放入img标签的src属性中var reportUrl = &/EditorChartServlet?filename=& + responseT$(&img&).attr(&src&,reportUrl);} }};xhr.setRequestHeader(&Content-Type&, &image/png&);xhr.send(blob); });
三、浏览器根据文件名从服务器端获取图片
Servlet的代码如下: package ctx.import java.io.Fimport java.io.FileOutputSimport java.io.IOEimport javax.servlet.ServletEimport javax.servlet.http.HttpSimport javax.servlet.http.HttpServletRimport javax.servlet.http.HttpServletRpublic class EditorChartServlet extends HttpServlet{ @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String filename = request.getParameter(&filename&);if (filename == null) {throw new ServletException(&Parameter 'filename' must be supplied&);} filename = ServletUtilities.searchReplace(filename, &..&, &&); String imgPath = MediaUtil.getImgPath();File file = new File(imgPath, filename);if (!(file.exists())) {throw new ServletException(&File '& + file.getAbsolutePath() + &' does not exist&);} ServletUtilities.sendTempFile(file, response); }}
所用到的ServletUtil方法代码如下: public static String searchReplace(String inputString, String searchString, String replaceString) {int i = inputString.indexOf(searchString);if (i == -1) {return inputS}String r = &&;r = r + inputString.substring(0, i) + replaceSif (i + searchString.length() & inputString.length()) {r = r + searchReplace(inputString.substring(i + searchString.length()), searchString, replaceString);} }public static void sendTempFile(File file, HttpServletResponse response) throws IOException {String mimeType =String filename = file.getName();if (filename.length() & 5) {if (filename.substring(filename.length() - 5, filename.length()).equals(&.jpeg&)) { mimeType = &image/jpeg&;} else if (filename.substring(filename.length() - 4, filename.length()).equals(&.png&)) { mimeType = &image/png&;}}sendTempFile(file, response, mimeType); }public static void sendTempFile(File file, HttpServletResponse response, String mimeType) throws IOException {if (file.exists()) {BufferedInputStream bis = new BufferedInputStream(new FileInputStream(file));if (mimeType != null) { response.setHeader(&Content-Type&, mimeType);}response.setHeader(&Content-Length&, String.valueOf(file.length()));SimpleDateFormat sdf = new SimpleDateFormat(&EEE, dd MMM yyyy HH:mm:ss z&, Locale.ENGLISH);sdf.setTimeZone(TimeZone.getTimeZone(&GMT&));response.setHeader(&Last-Modified&, sdf.format(new Date(file.lastModified())));BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());byte[] input = new byte[1024];boolean eof =while (!(eof)) { int length = bis.read(input); if (length == -1) {eof = } else {bos.write(input, 0, length); }}bos.flush();bis.close();bos.close();} else {throw new FileNotFoundException(file.getAbsolutePath());} }
希望对大家有帮助,多多交流。
以上是的内容,更多
的内容,请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱:zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器相关信息,包括
的信息,所有前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器相关内容均不代表阿里云的意见!投稿删除文章请联系邮箱:zixun-group@service.aliyun.com,工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
InternationalAccess denied | www.manong5.com used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (www.manong5.com) has banned your access based on your browser's signature (41ff0a7f7285938a-ua98).ASP.NET环境下配置FCKEditor并上传图片及其它文件
FCKEditor于2009年被更名为新一代的CKEditor和CKFinder,见。只是本来是一个的产品(FCKEditor)现在变成了两个(CKEditor
+ CKFinder),如果要上传文件到服务器上,最新版本的CKEditor +
CKFinder要结合使用才能提供编辑界面及搜索文件界面,所以还是暂时用老版本的FCKEditor吧,老版本经过这么多年的历练,稳定性应该没得说了。
知道FCKEditor的,就不能算是菜鸟了,所以这里也不多谈它是个什么东东,也不多谈它与其它在线html编辑器的对比(有时间的话,发一个适合于ASP.NET环境的主流在线html编辑器对比的博客,不过现在请相信:FCKEditor这个当前名列第一的在线html编辑器的确是货真价实。)
下边,详细地说明FCKEditor在ASP.NET环境下的配置,并如何设定它可以上传文件。注意,请严格按照说明配置,代码可以复制完成,如果你在看完本博客还是完成不了FCKEditor的配置,请在下边评论中留言,说明情况,博主帮助你解决,甚至可以把博主自己配置好的环境给你发到邮箱里(当然,你要在这个博客纸条里提供你的邮箱)。当然还是建议自己配置好,因为用这个工具的都是网站开发人员,如果按说明连这个都拿不下来,何谈开发?
笔者使用的环境是XP3、SQL SERVER EXPRESS
2008、VS2008(C#),注意它同样适用VS2005及Visual Web Developer这些环境,只要是.NET
FRAMEWORK 2.0以上即可
1、FCKEditor版本
当前FCKEditor的最新版本是FCKEditor2.6.5,笔者没有采用最新的CKEditor + CKFinder组合。
2、FCKEditor下载
到下载,下载两个压缩文件,分别是FCKeditor_2.6.5.zip
和FCKeditor.Net 2.6.3.zip,注意不要下载网页最上边的那个CKEditor
3.1文件,本博文不用这个版本。
FCKeditor_2.6.5.zip是FCKEditor的页面运行文件,FCKeditor.Net
2.6.3.zip是为ASP.NET环境制作的一个控件,最重要的就是里边那个.dll文件(后边会谈到)
3、FCKEditor解压及安装
最好新建一个网站进行配置,完成后,再对已经建成的ASP.NET网站配置,比如测试本博文的工作情况,笔者建立了一个网站,目录为F:\web。解压FCKeditor_2.6.5.zip
至网站根目录下的fckeditor中,比如笔者的网站根目录是F:\web,则将这个压缩文件解压到 F:\web\fckeditor
内(注意实际解压时,会是像这样的目录
FCKeditor_2.6.5\fckeditor,把fckeditor这个目录复制到网站根目录下即可);解压另外一个压缩文件
FCKeditor.Net 2.6.3.zip 到任意目录,注意把目录FCKeditor.Net
2.6.3\bin\Release\2.0 下的文件(只有这一个文件)FredCK.FCKeditorV2.dll
复制到网站根目录下的 \bin\ 目录内,按笔者的网站,就应该是 F:\web\bin
内。如果你这个网站是刚刚建立的网站,bin目录可能不存在,手工建立一个即可,注意保证目录名拼写正确。这个 .dll
文件是专门为asp.net
制作的一个控件。在VS2008右边解决方案资源管理器内点击“刷新”工具按钮(右边数第2个),保证在根目录下的 bin
目录内可以看到刚才复制的 .dll 文件。
4、建立FCKEditor控件
在VS2008左边工具箱内右击,点击快捷菜单中的“选择项...”,在“选择工具箱项”对话框中,点击“浏览”按钮,找到第3步你复制到
bin 目录内的 .dll
文件,点击“打开”,再点击“确定”;再看工具箱最下部的“常规”选项卡下,新添加了一个FCKEditor控件,添加成功。注意现在不要往网页上拖放,因为还没有配置好,即使把它拖放上去,也不能用。
&5、在VS2008环境中进入fckeditor目录,打开fckconfig.js文件,找到两行代码:
_FileBrowserLanguage&= 'asp' ;&//
asp | aspx | cfm | lasso | perl | php | py
_QuickUploadLanguage&= 'asp' ;&//
asp | aspx | cfm | lasso | perl | php | py
将它们改成:
_FileBrowserLanguage&= 'aspx' ;&// asp | aspx | cfm |
lasso | perl | php | py
_QuickUploadLanguage&= 'aspx' ;&// asp | aspx | cfm |
lasso | perl | php | py
可以看出这个里边有许多语言的选项,默认的是asp,
我们现在已经改成了aspx(红色是要改的地方)
6、在网站根目录下建立一个 Test.aspx 网页,复制下边一行代码
&%@ Register
TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2"
Assembly="FredCK.FCKeditorV2" %&
把它粘贴到Test.aspx页面源代码 &%@
Page Language="C#" ...&那一行下边(就是粘贴到第二行);
然后再复制下边四行代码
&form id="Form1"
method="post" runat="server"&
&FCKeditorV2:FCKeditor id="content" runat="server"
BasePath="~/fckeditor/"&
&/FCKeditorV2:FCKeditor&
选定&body&
&/body&内的全部内容(不含这对起始终止标签),然后粘贴(实际上是替换&body&...&/body&内的全部内容)
Well done!
现在可以了,运行之前把这个Test.aspx设为起始页,以后测试方便。Crtl + F5
运行,你可以看到浏览器内已经出现如下图所示的FCKEditor编辑界面:
点击第二行的“插入/编辑图片”按钮,出来一个对话框,点击上传标签,如下图所示:
再点击“浏览”按钮,出来就是你熟悉的选择文件对话框,选定相应的图片,点击“打开”,回到上图的界面,再点击“发送到服务器上”......??????
出现错误信息了吧,说无法复制。实际上,前述的6个步骤也就是做到这里:把界面显示出来,点击“插入/编辑图片”按钮,可以出来对话框,也可以查找文件,但发送到服务器上会失败。
前边的步骤让我们看到了希望。下边的步骤我们再耐心做下去,让发送到服务器上成功!
7、配置web.config
在WEB页面使用 FCKEditor
时,页面需要知道到哪里去找这个编辑器。现在进入 web.config 文件进行配置。打开
web.config,在appSettings配置节中加入(注意:如果是刚刚建立的网站,这个配置节的样子应该是&appSettings/&,需要把它做成起始与结束标签,像这样&appSettings&&
&/appSettings&,然后再向里边加入下边这行代码):
key="FCKeditor:BasePath" value="~/fckeditor/" /&
在这里配置好以后,今天加入FCKEditor编辑器控件时,就不用再设定BasePath值;
用户上传文件的缺省目录是网站根目录下的 UserFiles
目录,如果想要更改,同样要在appSettings配置节中设定,将下边这一行
key="FCKeditor:UserFilesPath" value="~/wusir/"
加入到刚才加入的那一行下面,今后上传到服务器的文件,就会放到网站根目录下的
wusir 目录内。本步骤完成后,下边的代码应该出现在 web.config 文件中(刚才完成的工作):
&&appSettings&
&!--设定寻找fckeditor路径及设定上传文件保存路径--&
&add key="FCKeditor:BasePath" value="~/fckeditor/"
&add key="FCKeditor:UserFilesPath" value="~/wusir/"
&/appSettings&
&要说明的是,在实际应用中,用户上传文件目录最好不是固定的,一个目录中文件太多,会影响访问速度,所以用户上传文件的目录,实际应用开发中,建议在代码中每隔一段时间自动建一个新目录,比如按年份
+ 月份 建目录。
8、启用文件上传功能
FCKeditor提供了强大和易用的文件上传功能,但是缺省配置中,文件上传功能不可用,这是基于安全的考虑。我们现在来修改它,使它可以完成上传功能。至于这个编辑器是在后台使用还是前台使用,用到什么权限,由网站开发人员用程序来设定吧。
在VS2008中打开
~\fckeditor\editor\filemanager\connectors\aspx\config.ascx
文件(~在ASP.NET中表示网站根目录),找到 CheckAuthentication(),将其中唯一的一行语句:
return true;
即不经过身份验证,任何人都可以上传文件,修改完成后,关闭并保存这个文件;
打开 ~\fckeditor\fckconfig.js
文件,找到配置行
FCKConfig.LinkBrowserURL =
FCKConfig.BasePath +
'filemanager/browser/default/browser.html?Connector=' +
encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/'
+ _FileBrowserLanguage + '/connector.' + _FileBrowserExtension )
将其修改为(红色部分为添加内容):
FCKConfig.LinkBrowserURL =
FCKConfig.BasePath +
'filemanager/browser/default/browser.html?Type=File&Connector=' +
encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/'
+ _FileBrowserLanguage + '/connector.' + _FileBrowserExtension )
找到另外一个配置行
FCKConfig.LinkUploadURL =
FCKConfig.BasePath + 'filemanager/connectors/' +
_QuickUploadLanguage + '/upload.' + _QuickUploadE
将其修改为(红色部分为添加内容):
FCKConfig.LinkUploadURL =
FCKConfig.BasePath + 'filemanager/connectors/' +
_QuickUploadLanguage + '/upload.' + _QuickUploadExtension
+ '?Type=File' ;
修改完成后,关闭并保存文件。
从这个配置文件来看,有三种类型,分别是 File, Image,
Flash,后两种都在配置文件中显式指定,Type=File
没有指定,应该是缺省的配置,但如果不显式配置,会出现问题,所以在这里显式配置出来。
点击VS2008菜单中的“生成 &
生成网站”,然后点击“调试 &
开始执行(不调试)”,重复前述的插入图片的做法,最后点击“发送到服务器上”,
Congratulations!!!
一鼓作气看到这里,估计读者累得够呛了吧。可以放松一下了,因为主要工作已经完成了。下边的工作是零碎的细化工作,心态就更放松了。
9、人性化、中文化FCKEditor
在解决方案资源管理器中打开 ~\fckeditor\fckconfig.js
配置控件语言:
找到下面的配置行
FCKConfig.AutoDetectLanguage&=
FCKConfig.DefaultLanguage&&= 'en'
将其改为(红字部分):
FCKConfig.AutoDetectLanguage&=
FCKConfig.DefaultLanguage&&=
即采用简体中文作为缺省语言。细心的读者已经看到,这里只改了一行,而笔者是写出了两行,实际上是想说明一个问题,可能更细心的读者已经看到本博文的第一个图片(就是FCKEditor编辑界面),它已经是中文了,这里边即使改成红颜色的简体中文,再运行还是一样的。注意这里没有改的第一行,这一行是自动检测语言,它会自动按浏览器的语言设定FCKEditor自己的显示语言的,所以即使第二行缺省语言在修改前是英语,但实际显示出来的仍然是中文,因为它检测出我的浏览器是中文的。妙吧!
配置 Tab 键:
默认 Tab 键在FCKeditor中不可用,找到配置行
FCKConfig.TabSpaces&&= 0 ;
将其修改为(红字部分):
FCKConfig.TabSpaces&&=
也就是改成了,按一下 Tab
键,缩进4个格,和VS2008编辑器的缩进是一样的,如果你想改成其它的值,比如3,比如5,你自己看着改吧。
为FCKEditor换肤:
FCKEditor提供了三个换肤方案:default,
office2003和silver。
找到配置行
FCKConfig.SkinPath = FCKConfig.BasePath
+ 'skins/default/' ;
可以看出现在配置的是缺省的外观(本博文截图就是这种外观),如果想尝试其它两种外观,可以分别改作:
FCKConfig.SkinPath = FCKConfig.BasePath
+ 'skins/office2003/' ;
FCKConfig.SkinPath = FCKConfig.BasePath
+ 'skins/silver/' ;
保存以后,运行一下,看看喜欢哪一种。
定制工具栏按钮:
本博文第一张图片是一个全功能的按钮配置,在实际应用中,如果后台使用FCKEditor,还可以用它,如果是前台使用,比如论坛、回帖等等,这种配置就易造成安全性问题。这个工具栏按钮可以手工配置的。
在 fckconfig.js 中提供两种工具栏配置。在配置行
FCKConfig.ToolbarSets["Default"] = [
里定义了使用全部可用按钮的配置(作为工具栏的默认配置)。
FCKConfig.ToolbarSets["Basic"] = [ ...
中定义了一个精简按钮的工具栏配置。如果对这两个都不满意,修改定制自己的按钮集好了。
配置值[ ... ]中是形式为[[v, v2, .., vN], '/', [
],...](vN表示要显示的按钮名字,'/'表示之后的按钮组在下一行显示)的按钮分组的集合。如果不需要整个分组的按钮,那么就删掉该分组(形式为
[ , , ...]);如果只是不需要分组中的某个按钮,删掉该按钮。
注意在修改时,把
FCKConfig.ToolbarSets["Default"] = [
全部内容复制粘贴在下边一份,把其中一份注释掉,修改另外一份,删除的方法比添加的方法好,这样安全,规范。修改时,随时运行网页,查看实际效果。
添加常用中文字体:
找到配置行
FCKConfig.FontNames = 'AComic Sans
MS;Courier NTTimes New RVerdana';
将其修改为(红色为添加部分):
FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;AComic Sans MS;Courier
NTTimes New RVerdana';&
关闭fckconfig.js,点击“生成 &
生成网站”,运行,看看修正后的效果。
10、FCKEditor瘦身
如果前边进展一切顺利,把这个网站目录复制存留一份复件,然后开始进行瘦身。
因为FCKEditor是针对所有主流的WEB开发平台,又针对所有主要国家语言的软件,而我们现在只用它运行于中文(把英文也考虑进去吧),只运行于ASP.NET平台,所以我们把其它与此无关的内容删除。
首先,在 ~\fckeditor
目录下,把所有以“_”符号形状的目录及文件全部删除,这样在 ~\fckeditor 下只有一个 editor 目录;
其次,在 ~\fckeditor 目录下,只保留
fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml
这五个文件,其它一律删除,如笔者的解决方案资源管理器截图如下:
接着,进入 ~\fckeditor\editor 目录,删除其中的
_source 目录;
进入 ~\fckeditor\editor\lang 目录,只留下
en.js, zh-cn.js 和 zh.js
这三个文件,其它文件全部删除,这些是工具栏语言文件,留下的三个分别是英语、简体汉字和繁体汉字。
~\fckeditor\editor\filemanager\connectors 目录,这里有支持各个开发平台的目录,只留下
aspx 目录,其它目录一概删除,注意留下那两个文件吧。
好了,大功告成!
看累了吧,我写得更累,愿这篇博文能够帮助你解决配置 FCKEditor
方面的问题。如果对你有帮助,请留言说明,如果运行不成功,或者里面有错误的地方,更希望你在留言中指出来。
本博文在编写过程中参照了
在此一并致谢。
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

我要回帖

更多关于 html网页上传到服务器 的文章

 

随机推荐