一、
准备工作
在http://www.fckeditor.net/download下载FCKeditor.java和FCKeditor
二、
配置测试应用
1.在eclipse下,new webproject建立FCKeditortest应用,
2.在FCKeditortest根目录下,即webRoot目录下,建立文件夹fckeditor,该文件夹存放所有FCKeditor相关文件。
3.将FCKeditor解压后,web/WEB-INF目录下的web.xml文件拷贝到步骤1新建的FCKeditortest应用的WEB-INF目录下.web.xml文件里有关于FCKeditor的配置,代码如下:
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
com.fredck.FCKeditor.connector.ConnectorServlet
</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/fckeditor/userfiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>
com.fredck.FCKeditor.uploader.SimpleUploaderServlet
</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/fckeditor/userfiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>
php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector
</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/upload/simpleuploader
</url-pattern>
</servlet-mapping>
<taglib>
<taglib-uri>/FCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>
4.将FCKeditor.java解压文件夹下的editor目录拷贝到步骤1建立的fckeditor目录下,可以将editor下的_source目录删除
5.将FCKeditor.java解压文件夹下的fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml四个文件拷贝到步骤1建立的fckeditor目录下
6.将FCKeditor解压文件夹下的web/WEB-INF/lib下的jar文件拷贝到步骤1建立的FCKeditortest应用的lib下
7.插入图片和图片文件上传功能,还会报错,需要将xalan.jar、serializer.jar拷贝到lib目录下,那两个jar文件jboss应用服务器的lib\endorsed目录下能找到.
8.在fckeditor目录下,建立userfiles/Image文件夹,存放上传图片文件用。
9.将FCKeditor解压文件夹下的src/FCKeditor.tld拷贝到应用的WEB-INF目录下
10.按如下方法建立测试页面,即可
三、
fckeditor用法
1.fckeditor的自定义标签:(必须加头文件<%@ taglib uri="/FCKeditor" prefix="FCK" %>) 代码如下:
<form action="FckAction.do" method="post" target="_blank">
<textarea id="content" name="content"
style="display: none"><%=request.getAttribute("content") %></textarea>
<input type="hidden" id='page' name='page' value='test1'>
<fck:editor id="content" basePath="/fckeditor_test/fckeditor/"
width="700" height="500" skinPath="/fckeditor_test/fckeditor/editor/skins/silver/"
toolbarSet="Default">
</fck:editor>
<input type="submit" value="Submit" />
</form>
2.script语言(必须引用 脚本文件<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script> )
<form action="FckAction.do" method="post" target="_blank">
<input type="hidden" id='page' name='page' value='test2'>
<table border="0" width="700">
<tr>
<td>
<textarea id="content" name="content"
style="WIDTH: 100%; HEIGHT: 400px"><%=request.getAttribute("content") %></textarea>
<script language="javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/fckeditor_test/fckeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
3.FCKeditor API 调用 (必须加头文件<%@ page language="java" import="com.fredck.FCKeditor.*" %> )
<form action="FckAction.do" method="post" target="_blank">
<input type="hidden" id='page' name='page' value='test3'>
<textarea id="content" name="content"
style="display: none"><%=request.getAttribute("content") %></textarea>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/fckeditor_test/fckeditor/" ) ;
oFCKeditor.setWidth("500");
oFCKeditor.setHeight("400");
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<input type="submit" value="Submit">
</form>
四、js与fckeditor的交互
//js获得fckeditor输入框内容
function getContent() {
<wbr>//参数是输入框id<br><wbr>var oEditor = FCKeditorAPI.GetInstance('content') ;<br><wbr>alert(oEditor.GetXHTML(true));<br>
}<br>
//js设置fckeditor输入框内容<br>
function setContent() {<br><wbr>//参数是输入框id<br><wbr>var oEditor = FCKeditorAPI.GetInstance('content') ;<br><wbr>oEditor.SetHTML('新内容');<br>
}<br>
五、修改FCKeditor的字体和字号<br><br></wbr></wbr></wbr></wbr></wbr></wbr>
字体:fckconfig.js第143行
FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
字号:fckconfig.js第144行
FCKConfig.FontSizes = '1/5;2/7;3/8;4/9;5/10;6/12;7/14;8/16;9/18;10/20;1/xx-small;2/x-small;3/small;4/medium;5/large;6/x-large;7/xx-large' ;
相关推荐
fckeditor 完整示例 samples
cuteEditor Fckeditor破解 使用示例 cuteEditor Fckeditor破解 使用示例
FCKEditor2.6使用小示例FCKEditor2.6使用小示例FCKEditor2.6使用小示例FCKEditor2.6使用小示例
FCKeditor控件示例 上传文本,图片,原格式
完整的FCKeditor示例,支持版本选择,外观,字体 使用起来,很强大
含有简单例子,开发文档以及fckeditor文件
FCKEditor2.6使用小示例完全示例
VS2005下使用Fckeditor2.5.1的例子.已经减肥过的Fckeditor.
Fckeditor java示例,下载后可以直接运行
asp.net FCKeditor 配置例子。。。。。。 http://www.dotnetdev.cn
简单易操作ASP.NET mvc使用FCKeditor.zip在线编辑器示例
下载后导入eclipse部署运行
这个例子是我在一个项目中的fckeditor的使用,还有例子,现在想在csdn上下点东西但没有积分了,没有办法啊!
fckeditor使用及常见问题。包含javaWeb中使用fckeditor需要使用的文件和类库,还包含一个完整的fckeditor web示例程序
FCKeditor应用完整例子,包括文字格式,文件上传等一一具全 J2EE JSP JAVA
Asp.Net Fckeditor示例
是我经常用的一个编辑器,做新闻系统等要用的
亲手所为,简单应用FCKEditor2.6.3示例。 示例压缩包中包括简单操作指南。
资源包括FCKeditor_2.5.1.zip、 FCKeditor_2.3.zip、 FCKeditor工程配置文档和使用相关信息、 完整的FCK工程示例
fckeditor示例,经过本人精简,可以直接导入eclipse/myeclipse部署运行,支持图片和flash上传,所见即所得