java onetowthree替换_FCKEditor2.6.6 配合 JavaWeb 的 使用步骤

etc_13.gif  FCKEditor是一个很好的用于Web页面中的格式化文本编译控件。现在越来越多的论坛的发帖页面中更多的使用了这个控件,

我总结的 把 这个控件 如何在JavaWeb开发中使用FCKEditor 控件的步骤提供给大家,为的是让更多的 Java初学发者花费更少的时间去做更多的事。

总体来说 4 个步骤:

One :首先去下载FCKEditor2.6.6 (现在已经是 3.6.1 的版本了,建议还是 使用稳定的版本比较好)

下载地址:http://www.fckeditor.net/download

我们需要下载两个文件:

(1) FCKeditor_2.6.6.zip,就是FCKEditor的控件;

(2) FCKeditor.Java(fckeditor-java-2.6-bin.zip),就是在Java代码中使用FCKEditor的相关工具类;

two :    有了这两个文件,使用  FCKEditor 的基础就具备了,接下来做 2 件事情:

(1)就是要把  FCKEditor控件 放到 web项目中,这个控件是用于网页的,所以其代码是使用JavaScript脚本编写的,需要和web网页一起被下载的浏览器上才能执行,

(2)是这个网页上的控件因为支持图片的上传与下载,所以在上传与下载的时候需要服务端的支持,我们就的需要 FCKEditor 自身提供了相关的Java工具  用来支持这个控件的工作 ,也就是就是我们下载的第二个文件。

因此我们要做的第二件事情就是在服务端配置  Java工具,使得FCKEditor控件在处理上传图片时能够正确工作。

Three:接下来我们就开始对配置 FCKEditor 控件进行 2 项工作:

(1) :

解压缩FCKeditor_2.6.3.zip ,在其中我们能找到一个文件夹叫fckeditor,那么将这个文件夹整个复制到你的web应用的根目录下,就是存放jsp页面的地方。

(2) :

解压缩fckeditor-java-2.6-bin.zip,将这样几个jar文件复制到web应用的WEB-INF\lib目录中(commons-fileupload-1.2.1.jar

commons-io-1.3.2.jar

p_w_picpathinfo-1.9.jar

java-core-2.6.jar

slf4j-api-1.5.8.jar

slf4j-simple-1.5.8.jar)

其中最后一个文件在这个zip包中可能不存在,那么你可以去这个链接地址下载一个文件叫 fckeditor-java-demo-2.6.war

(

下载地址1:

http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/

下载地址2:

http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/fckeditor-java-demo-2.6.war/download

)

在这个war文件中的 lib 中存在上述的 6 个 jar 文件,其实在 war 中也包含了  FCKEditor 控件的内容,也就是说如果你只是下载了 war 也可以了。

然后在classpath目录中创建一个名叫为fckeditor.properties的文件在src下(编译之后处于classes目录中),文件中放置内容为:

connector.resourceType.file.extensions.allowed=|jpg|gif|png|rar|zip|txt|doc|wma|wmv|mp3|flv|swf|

connector.resourceType.media.extensions.allowed=|wma|wmv|mp3|flv|swf|

connector.resourceType.p_w_picpath.extensions.allowed=|jpg|png|gif|

connector.resourceType.flash.extensions.allowed=|swf|

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

fckeditor.basePath = /fckeditor(fck资源所在webapp中的目录)

fckeditor.skinPath = /skins/office2003/(fck样式,这里可选默认和office2003的样式)

fckeditor.height = 630(fck编辑器的高度)

在web.xml中添加一个Servlet的配置,配置内容如下:

ConnectorServlet

net.fckeditor.connector.ConnectorServlet

1

ConnectorServlet

/fckeditor/editor/filemanager/connectors/*

Four: 好了,现在你已经完成了配置的过程,接下来我们需要在jsp中使用FCKEditor控件了,

在需要使用这个控件的jsp文件的开头添加标签库的引入语句:

在使用控件进行文本格式化输入的地方(原来你可能使用的textarea标签)使用如下的内容来替换原来的输入控件:

内容.....

其中 instanceName 属性的 值就相当于 form 表单中的 input 的 name 值。 就是 表单 提交 时候 的 键值对 中 的键 的名字。

最后 在  创建一个 result  页面 , 在里面 用 你想用的用的方式接收一下 输出 即可:

例如 这样 :

OVER !!!

1.下载最新版的FCKEDITOR 2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置) 3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问: http:///FCKeditor/_samples/default.html 注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示: oFckeditor.BasePath="/Components/fckeditor/"; 另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的 如何将FCKEDITOR整合进我的页面? 由于目前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这里仅讲述如何应用JAVASCRIPT来整合FCKEDITOR到站点中,当然,其他各种语言的整合,你可以参考_samples文件夹中的例子来完成 1,假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如: 其中路径是可更改的 2,现在,FCKEDITOR类已经可以使用了.有两个方法在页面中建立一个FCKEDITOR编辑器: 方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码: script type="text/javascript"> var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.Create() ; 方法2:TEXTAREA标记替换法(不建议使用):在页面的ONLOAD事件中,添加以下代码以替换一个已经存在的TEXTAREA标记 window.onload = function() { var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; oFCKeditor.ReplaceTextarea() ; } This is the initial value. 3.现在,编辑器可以使用了 FCKEDITOR类参考: 下面是用来在页面中建立编辑器的FCKEDITOR类的说明 构造器: FCKeditor( instanceName[, width, height, toolbarSet, value] ) instanceName:编辑器的唯一名称(相当于ID) WIDTH:宽度 HEIGHT:高度 toolbarSet:工具条集合的名称 value:编辑器初始化内容 属性: instanceName:编辑器实例名 width:宽度,默认值为100% height:高度,默认值是200 ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default value:初始化编辑器的HTML代码,默认值为空 BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾 CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true DisplayErrors:是否显示提示错误,默为true; 集合: Config[Key]=value; 这个集合用于更改配置中某一项的值,如 oFckeditor.Config["DefaultLanguage"]="pt-br"; 方法: Create() 建立并输出编辑器 RepaceTextArea(TextAreaName) 用编辑器来替换对应的文本框 如何配置FCKEDITOR? FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js 你既可以编辑主配置文件,也可以自己定义单独的配置文件.配
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值