FCKeditor使用示例

FCKeditor使用示例
 
一、准备工作
　　在下载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的配置，代码如下:

Connector

com.fredck.FCKeditor.connector.ConnectorServlet


baseDir
/fckeditor/userfiles/


debug
true

1


SimpleUploader

com.fredck.FCKeditor.uploader.SimpleUploaderServlet


baseDir
/fckeditor/userfiles/


debug
true


enabled
true


AllowedExtensionsFile



DeniedExtensionsFile

php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi



AllowedExtensionsImage
jpg|gif|jpeg|png|bmp


DeniedExtensionsImage



AllowedExtensionsFlash
swf|fla


DeniedExtensionsFlash


1


Connector

/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector



SimpleUploader

/fckeditor/editor/filemanager/upload/simpleuploader



/FCKeditor
/WEB-INF/FCKeditor.tld

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" %>) 代码如下:

<br style="color: rgb(0, 1, 255);"><span style="color: rgb(0, 1, 255);">style="display: none"><%=request.getAttribute("content") %>


width="700" height="500" skinPath="/fckeditor_test/fckeditor/editor/skins/silver/"
toolbarSet="Default">

2.script语言(必须引用 脚本文件 )

<br style="color: rgb(0, 1, 255);"><span style="color: rgb(0, 1, 255);">style="WIDTH: 100%; HEIGHT: 400px"><%=request.getAttribute("content") %>

3.FCKeditor API 调用 (必须加头文件<%@ page language="java" import="com.fredck.FCKeditor.*" %> )

<br style="color: rgb(0, 1, 255);"><span style="color: rgb(0, 1, 255);">style="display: none"><%=request.getAttribute("content") %>
<%
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() ) ;
%>

四、js与fckeditor的交互

//js获得fckeditor输入框内容
function getContent() {
  //参数是输入框id
  var oEditor = FCKeditorAPI.GetInstance('content') ;
  alert(oEditor.GetXHTML(true));
}
//js设置fckeditor输入框内容
function setContent() {
  //参数是输入框id
  var oEditor = FCKeditorAPI.GetInstance('content') ;
  oEditor.SetHTML('新内容');
}
五、修改FCKeditor的字体和字号

字体: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' ;
本文仅为提供更多信息，不代表新浪BLOG同意其观点或描述。如需转载请注明出处。
close     关闭阅读模式