Java中JSP、JS调用fckeditor的两种方法



Java中JSP、JS调用fckeditor的两种方法。

在java开发中用得比较多的文本编辑器一般采用fckeditor。

现就fckeditor在JSP中的调用归纳如下:

<%

String path = request.getContextPath();

String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;

%>

1、JSP页面在调用:

1)首先在web.xml中做简单的配置,配置文件内容如下,直接copy到web.xml即可:

<servlet>

<servlet-name>Connector</servlet-name>

<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>

<init-param>

<param-name>baseDir</param-name>

<param-value>/UserFiles/</param-value>

</init-param>

<init-param>

<param-name>debug</param-name>

<param-value>false</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>/UserFiles/</param-value>

</init-param>

<init-param>

<param-name>debug</param-name>

<param-value>false</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>/include/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>

</servlet-mapping>

 

<servlet-mapping>

<servlet-name>SimpleUploader</servlet-name>

<url-pattern>/include/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>

</servlet-mapping>

 

<taglib>

<taglib-uri>/include/fckeditor</taglib-uri>

<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>

</taglib>

2)JSP页面要引入FCKeditor.tld这个文件,该文件放在WEB-INF文件夹下,页面引入代码如下:

<%@ taglib uri=”/WEB-INF/FCKeditor.tld” prefix=”fck” %>

3)实现代码如下:


<tr>

<td><label for=”f_content”>内容</label></td>

<td  colspan=”3″>

<fck:editor id=”f_content” basePath=”/dpsafe/include/fckeditor/”

height=”500″

width=”100%”

skinPath=”/dpsafe/include/fckeditor/editor/skins/default/”

toolbarSet=”Default”

imageBrowserURL=”/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector”

linkBrowserURL=”/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector”

flashBrowserURL=”/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector”

imageUploadURL=”/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image”

linkUploadURL=”/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=File”

flashUploadURL=”/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash”>

</fck:editor>

</td>

</tr>

我将fckeditor单独入在一个公用的include文件夹中,以便任何要用到该编辑器的页面都能够引用它,节省空间,维护方便。

到此fckeditor编辑器也就能够使用了。

 

2、  在页面写这么多东西,感觉太复杂了一点,要写配置还要引用文件;用JS调用就相对要简单些,具体介绍如下:

1)引入fckeditor.js文件,具体代码如下:

<script language=”javascript” type=”text/javascript” src=”<%=basePath%>/include/fckeditor/fckeditor.js”></script>

2)  页面具体的代码调用如下:

<tr>

<td><label for=”f_content”>内容</label></td>

<td  colspan=”3″>

<script type=”text/javascript”>

<!–

var sBasePath = “<%=basePath%>/include/fckeditor/”;

var oFCKeditor = new FCKeditor( ‘f_content’ ) ;

oFCKeditor.BasePath = sBasePath ;

oFCKeditor.Height      = 500 ;

oFCKeditor.Create() ; //调用它的create()方法来直接在JSP嵌入FCKeditor编辑器

//–>

</script>

</td>

</tr>

另一种调用FCKeditor编辑器的方法的简单区别是:

<td>

<textarea id=”f_content” name=”f_content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>

<script type=”text/javascript”>

var sBasePath = “<%=basePath%>/include/fckeditor/”;

var oFCKeditor = new FCKeditor( ‘f_content’ ) ;

oFCKeditor.BasePath = sBasePath ;

oFCKeditor.Height      = 500 ;

oFCKeditor.ReplaceTextarea();  //替换文本域

</script>

</td>

 

3、  修改页面如何实现,只需修改几个部分即可,具体如下:

1)JSP修改页面只需在增加页面的基础上加一句代码:

<fck:editor id=”f_content” basePath=”/dpsafe/include/fckeditor/”

height=”500″

width=”100%”

skinPath=”/dpsafe/include/fckeditor/editor/skins/default/”

toolbarSet=”Default”

imageBrowserURL=”/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector”

linkBrowserURL=”/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector”

flashBrowserURL=”/dpsafe/include/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector”

imageUploadURL=”/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image”

linkUploadURL=”/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=File”

flashUploadURL=”/dpsafe/include/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash”>

<%=pubDTO.getContent() %>

</fck:editor>

2)JS修改方法如下:

<tr>

<td><label for=”f_content”>内容</label></td>

<td  colspan=”3″>

<script type=”text/javascript”>

var sBasePath = “<%=basePath%>/include/fckeditor/”;

var oFCKeditor = new FCKeditor( ‘f_content’ ) ;

oFCKeditor.BasePath  = sBasePath ;

oFCKeditor.Height       = 500 ;

oFCKeditor.Value = ‘<%=f_content%>’ ;

oFCKeditor.Create() ;

//–>

</script>

</td>

</tr>

http://dilegencehe.blog.163.com/blog/static/4325541320101262521363/