第一步:下载FCKeditor文件
第二步:解压到站点的WebRoot目录下
第三步 : 验证你是否安装成功
格式:
http://<your site>/<CKEditor installation path>/_samples/default.html
实例:
http://www.example.com/ckeditor/_samples/default.html
配置:
1、将FCKeditor集成到你的项目当中去。
将下面的js文件添加到你的jsp文件中的head标签中
<script type="text/javascript" src="/blog/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor('textarea标签的名称') ;
oFCKeditor.BasePath = "/blog/fckeditor/" ;
oFCKeditor.ToolbarSet = 'Default' ;
oFCKeditor.Height=400;
oFCKeditor.ReplaceTextarea() ;
}
</script>
注意:/blog/fckeditor/fckeditor.js中的/blog是文本项目名称
========》自定义标签 《=========
必须的jar文件:
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
commons-io-1.3.2.jar
slf4j-api-1.5.6.jar
slf4j-simple-1.5.6.jar其中,slf4j-api-1.5.6.jar和slf4j-simple-1.5.6.jar必须是一个版本
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="FCK" uri="http://java.fckeditor.net" %>
<html>
<title></title>
<body>
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="this is a value" toolbarSet="myToobar"></FCK:editor>
</body>
</html>
========》 创建自己的配置文件 《=========
Fckeditor的主配置文件是fckconfig.js,可以直接修改此配置文件,但是不推荐。建议创建额外的配置文件。如myconfig.js
具体步骤如下:
1、创建myconfig.js配置文件(WebRoot下)
2、添加内容,如:
FCKConfig.AutoDetectLanguage= false ;
FCKConfig.DefaultLanguage= 'en' ;
3、将配置文件添加到fckditor中
a、在主配置文件中配置(fckconfig.js)
修改此属性:FCKConfig.CustomConfigurationsPath = '/项目名称/自定义的配置文件名称' ;
如:FCKConfig.CustomConfigurationsPath = '/test/myconfig.js'
注意:第一个/代表当前站点路径,
b、在调用的页面中指定配置文件,如:
<script type="text/javascript">
var oFCKeditor = new FCKeditor("FCKeditor1");
oFCKeditor.BasePath="/test/fckeditor/";
oFCKeditor.Witdh="50%";
oFCKeditor.Height="400";
oFCKeditor.Value="initial value";
oFCKeditor.ToolbarSet="Basic";
c、将创建的配置文件放在fckconfig.js相同的目录下,然后修改fckconfig.js文件,
FCKConfig.CustomConfigurationsPath = FCKeditor.EditorPath + "自定义的配置文件名称"
oFCKeditor.Config[“CustomConfigurationsPath]="/项目名称/配置文件的名称";
oFCKeditor.Create();
</script>
注意:a方式会影响所有页面,b方式只会影响指定的页面
==========》 修改配置文件 《=========
1、自定义ToolbarSet,去掉一些功能
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
上面用单引号引起来的单词是一个功能,如:‘Source'表是源码
'-'表示分隔符
'/'表示换行
将自定义的Toolbar设置到项目中:
a、<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="this is a value" toolbarSet="自定义的Toolbar名称"></FCK:editor>
b、oFCKeditor.ToolbarSet="自定义的Toolbar名称";
2、加上几种常用的字体
FCKConfig.FontFormats= 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
FCKConfig.FontNames= 'Arial;Comic Sans MS;Courier New;Tahoma;Times New ;'
FCKConfig.FontSizes = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;
FCKConfig.FontFormats 字体格式
FCKConfig.FontNames 字体名称
FCKConfig.FontSizes 字体大小
将你要添加的字体添加到FCKConfig.FontNames中即可
注意:保存时一定要使用UTF-8格式
3、修改“回车”和“shift+回车"的换行行为
FCKConfig.EnterMode = 'p' ; // p | div | br 回车模式
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br shift+回车模式
p | div | br为可选项
4、修改编辑区样式文件
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
其中的FCKConfig.BasePath为fckeditor/editor目录
修改fck_editorarea.css中的样式就可以了
5、文件上传的功能
第一步:在你的web.xml文件中声明一个Servlet,代码如下
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
第二步:创建一个名为fckeditor.properties的文件,并且添加到classpath路径中,即添加到src目录下,添加下列信息:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
问题:
1、出现乱码
先查看你上传的资源在服务器端是否也是乱码,然后看fckeditor/editor/filemanager/browser/default/frmresourceslist.html文件是否处理了乱码,再看net.fckeditor.connector.ConnectorServlet类中是否处理乱码,如果没有则处理。
处理过程:
由于net.fckeditor.connector.ConnectorServlet源代码不能被修改,所以把此类的代码全部复制出来,在src下新建一个Servlet类,名字也叫ConnectorServlet,然后修改内容,修改web.xml,加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet,则修改如下:
<servlet-class>
com.blog.servlet.ConnectorServlet
</servlet-class>
2、创建目录出现乱码(由于net.fckeditor.connector.ConnectorServlet源代码不能被修改,所以把此类的代码全部复制出来,在src下新建一个Servlet类,名字也叫ConnectorServlet,然后修改内容,修改web.xml,加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet,则修改如下:)
com.blog.servlet.ConnectorServlet中的
String newFolderStr =
UtilsFile.sanitizeFolderName(request .getParamete("NewFolderName"));代码改为:
String tempStr = request.getParameter("NewFolderName");
tempStr = new String(tempStr.getBytes("iso8859-1"),"UTF-8");
String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);
3、中文名称的图片不能显示
第一种方式:修改Tomcat服务器中conf目录下的server.xml文件中的
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
/>中添加URLEncoding=“UTF-8”,重启服务器
(不推荐使用,因为会影响到中文的传输)
第二种方式:
我们避免出现中文名字的图片
由于net.fckeditor.connector.ConnectorServlet源代码不能被修改,所以把此类的代码全部复制出来,在src下新建一个Servlet类,名字也叫ConnectorServlet,然后修改内容,修改web.xml,加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet,则修改如下:
// We upload only one file at the same time
FileItem uplFile = items.get(0);
String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
String filename = FilenameUtils.getName(rawName);
String baseName = FilenameUtils.removeExtension(filename);
String extension = FilenameUtils.getExtension(filename);
在上面的代码下加下面这条语句:
filename=UUID.randomUUID().toString() + "." + extension;
该方式就是借助工具将图片中的中文去掉,生成新的图片名称
4、控制允许文件上传的文件类型
FCKeditor将上传的文件分为四种:
file(文件),image(图片),flash,media(多媒体文件)
配置分为客服端和服务端配置,客服端和服务端的文件类型必须一样
可以在net/fckeditor/handlers目录下找到默认的配置文件default.properties包含了所有的配置项
Fckeditor.properties
connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip (配置允许上传的文件类型)
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png (允许上传的图片类型)
connector.resourceType.flash.extensions.allowed = swf|fla (允许上传flash的类型)
connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv (允许上传多媒体类型)
注意:配置是按你的需要选择上面的个文件类型
找fckconfig.js配置文件包含了所有的配置项
myfckeditor.js自定义的客服端配置文件
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; (图片)
FCKConfig.FlashUploadAllowedExtensions= ".(swf|flv)$" ;(flash)
FCKConfig.LinkUploadAllowedExtensions = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ; (文件)
客服端不支持配置多媒体
注意:根据需要选择类型
5、控制允许上传文件的大小(注:fckeditor没有提供这种配置,只能修改它的源代码)
由于net.fckeditor.connector.ConnectorServlet源代码不能被修改,所以把此类的代码全部复制出来,在src下新建一个Servlet类,名字也叫ConnectorServlet,然后修改内容,修改web.xml,加入你修改后的 ConnectorServlet的全路径为com.blog.servlet.ConnectorServlet,则修改如下:
修改前:
if (!ExtensionsHandler.isAllowed(resourceType, extension))
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else {
// construct an unique file name
File pathToSave = new File(currentDir, filename);
修改后:
if (!ExtensionsHandler.isAllowed(resourceType, extension))
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else if(uplFile.getSize()> 100 * 1024) //添加的代码
ur = new UploadResponse(204); //自定义错误码204
else {
// construct an unique file name
File pathToSave = new File(currentDir, filename);
客服端修改:
找到相应的页面
如:fck_image.js中的
switch ( errorNumber )
{
case 0 : // No errors
alert( 'Your file has been successfully uploaded' ) ;
break ;
case 1 : // Custom error
alert( customMsg ) ;
return ;
case 101 : // Custom warning
alert( customMsg ) ;
。。。
}
添加204错误。因为上面定义的204错误
调用服务端的Servlet进行验证
客服端 ————————————————————> 服务端
如果验证失败,返回错误码
客服端 <———————————————————— 服务端
弹出错误信息
客服端 ————————————
6、在表单中使用FCKeditor
将创建FCKeditor的代码放到表单中即可
<from>
<script type="text/javascript">
var oFCKeditor = new FCKeditor("FCKeditor1");
oFCKeditor.BasePath="/test/fckeditor/";
oFCKeditor.Witdh="50%";
oFCKeditor.Height="400";
oFCKeditor.Value="initial value";
oFCKeditor.ToolbarSet="Basic";
oFCKeditor.Create();
</script>
<submit
</from>
========》 更换表情图片 《========
以下是配置表情图片的配置项:
FCKConfig.SmileyPath= FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages=['myImage.gif','regular_smile.gif','sad_smile.gif',.....] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth= 320 ;
FCKConfig.SmileyWindowHeight= 210 ;
配置选项的大意:
FCKConfig.SmileyPath(表情图片的放置路径;fckeditor/editor/images/smiley/msn)
FCKConfig.SmileyImages(要显示的图片)
FCKConfig.SmileyColumns (每行显示几个表情图片)
FCKConfig.SmileyWindowWidth (显示图片框的宽度)
FCKConfig.SmileyWindowHeight (显示图片框的高度)
替换方法一
步骤:
1、将图片增加到fckeditor/editor/images/smiley/msn路径中
2、将图片的名称添加到FCKConfig.SmileyImages中
注:以上的配置选项在FCKeditor的主配置文件中fckconfig.js
替换方法二
步骤:
1、将图片保存在一个文件夹中,然后将文件夹保存在fckeditor/editor/images/smiley目录下
2、将图片的名称添加到FCKConfig.SmileyImages中(格式参考主配置文件)
设置表情图片的宽高和滚动条
1、设置宽度,如:FCKConfig.SmileyWindowWidth=200;
2、设置表情显示的个数, 如:FCKConfig.SmileyColumns=8;
3、设置高度,如:FCKConfig.SmileyWindowHeight=300;
但是,如果你加入的表情图片很对,高度的设置将不会有效,因为Fckeditor会自动的显示所有图片。所以需要修改源文件(fckeditor/editor/dialog/fck_smiley.html)将dialog.SetAutoSize( true ) ;语句注释掉或则改为false。此时还会出现表情图片不能全部显示出来的问题,解决方法是将(fckeditor/editor/dialog/fck_smiley.html)源文件中的<body style="overflow: hidden">语句的hidden改为auto,然后保存刷新就可以了。
相关推荐
自己写的 FckEditor 入门文档 文档中包括FckEditor 介绍、配置、实例讲解和拷贝网上其它例子文章等,已经算是很全面的文档了,20多页的PDF。 还额外赠送Demo实例,直接用Tomcat就可以运行,配置都弄好了,jar包都...
**FCKeditor入门教程之一:配置及简单运行篇** FCKeditor是一款强大的开源富文本编辑器,它在Web开发中广泛用于提供用户友好的在线文本编辑功能。本教程将引导你了解如何配置并运行FCKeditor,从而在你的网页中集成...
本教程将引导你入门FCKeditor的使用,帮助你快速掌握其基本功能和应用。 首先,你需要在项目中引入FCKeditor。下载并解压提供的"FCKeditor"压缩包,你会得到一个包含所有必需文件和资源的目录结构。FCKeditor的核心...
**FCKeditor v2.6.4.1** 是一个早期版本的开源在线网页编辑器,主要用于实现浏览器中的“所见即所得”(WYSIWYG)编辑功能。这款编辑器以其跨平台和多语言支持而闻名,尤其适用于那些希望在网站上提供用户友好的文本...
3. **fckeditor入门视频教程**:fckeditor是一款开源的富文本编辑器,适用于构建需要用户输入格式化内容的Android应用。 4. **Struts入门视频教程**:Struts是一个基于MVC(Model-View-Controller)架构的Java Web...
3. **示例代码**:为了帮助开发者快速入门,jar包可能包含了一些示例代码或教程,演示如何在Java应用中集成FCKeditor。 4. **配置文件**:配置文件用于设定FCKeditor的行为,如文件上传路径、大小限制等。 5. **语言...
**FCKeditor for Java 入门指南** FCKeditor 是一款知名的开源富文本编辑器,它为Web应用程序提供了强大的文本格式化功能。在Java环境中,我们可以利用FCKeditor与Servlet结合,实现用户在Web页面上进行富文本编辑...
1. **快速上手**:视频教程通常会演示如何安装、配置和集成FCKeditor,帮助初学者快速入门。 2. **掌握高级功能**:视频中可能会详细介绍一些复杂的操作,如自定义工具栏、处理文件上传等,使你更好地利用编辑器的...
本篇将深入探讨Fckeditor的应用,适合初学者入门学习。 ### 一、Fckeditor简介 Fckeditor是一款基于JavaScript的WYSIWYG(所见即所得)在线编辑器,它允许用户在浏览器中像使用桌面应用程序一样编辑HTML文档。...
1. **readme.htm**:通常这是一个包含软件介绍、安装指南和使用注意事项的文件,是了解编辑器的入门资料。 2. **index.html**:这个可能是FCKeditor的示例页面或者演示入口,通过打开这个文件,用户可以直观地看到...
总结来说,ASP FCKeditor在线编辑器的使用方法涵盖了从下载、安装、配置到API使用等各个方面,对于刚入门的Web开发者而言,掌握这些知识点是必要的。通过定制化和配置,开发者能够使FCKeditor编辑器更好地适应特定的...
荐大家按以下顺序学习: 张孝祥java基础-> 张孝祥java高级-> ...传智播客FCKeditor教程-> 传智播客AJAX视频教程-> 传智播客巴巴运动网-> 其它视频: FTP服务器架设视频教程-> 传智播客JNI视频教程->
这些编辑器具有更好的兼容性、性能和更多的定制选项,但FCKeditor对于初学者来说仍然是一份宝贵的入门资料。 在学习过程中,可以通过阅读FCKeditor的文档、参考`samples`中的示例以及实践使用,逐步熟悉和掌握其...
荐大家按以下顺序学习: 张孝祥java基础-> 张孝祥java高级-> ...传智播客FCKeditor教程-> 传智播客AJAX视频教程-> 传智播客巴巴运动网-> 其它视频: FTP服务器架设视频教程-> 传智播客JNI视频教程->
Java整合FCK编辑器是一个常见的任务,特别是在开发Web应用程序时,需要一个富文本编辑器来提供用户友好的内容创建体验。FCKeditor(现在已经更名为...使用提供的"**fcktest**"压缩包,可以帮助快速入门并解决具体问题。
厌倦了eWebEditor,也厌倦了FckEditor,因为他们臃肿,加载速度慢,所以开发了一个更为实用的,而且体积小(只有十几k),兼容性好(兼容各种主流浏览器,如IE;FF;OPEAR等)加载速度快,且构思严谨的编辑器,该web...
16.1.2 ASP.NET AJAX 入门 16.1.3 ASP.NET 2.0 AJAX 16.1.4 ASP.NET 3.5 AJAX 第一篇窗口与界面编程 19 16.1.5 AJAX 简单示例 16.2 ASP.NET 3.5AJAX 控件 16.2.1 脚本管理控件(ScriptManger) 16.2.2 脚本管理控件...
《传智播客_赖家材struts入门》558M 《传智播客_贪吃蛇游戏开发java培训_视频教程》317M 《传智播客_王泽佑_JNI教程》173M 《传智播客_张孝祥_javascript教程》1.12G 《传智播客_张孝祥_java高级视频》797M 《传智...
《传智播客_赖家材struts入门》558M 《传智播客_贪吃蛇游戏开发java培训_视频教程》317M 《传智播客_王泽佑_JNI教程》173M 《传智播客_张孝祥_javascript教程》1.12G 《传智播客_张孝祥_java高级视频》797M ...