Java中fck自定义标签、JS调用fckeditor

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

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

<%

String path = request.getContextPath();

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

%> 

1、FCKeditor自定义标签在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 class="tr_title_edit"><label for="f_content">内容</label></td>

<td  class="tr_content_edit" 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 class="tr_title_edit"><label for="f_content">内容</label></td>

<td  class="tr_content_edit" 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 class="tr_title_edit"><label for="f_content">内容</label></td>

<td  class="tr_content_edit" 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>

 

评论

2 楼 speed_guo 2010-04-15  

mikkjl 写道

FCK 现在也在用 非常好 但要弄好它 还是得好好研究

总的来说，FCK还不错，不过有点大，相对webEditor要大多了，还有要想更多的了解它，可以看下它的外部引用，自定义函数来引用FCK里的函数，我做了一个锚点的外部引用，这方面有点麻烦，要对JS比较了解。

1 楼 mikkjl 2010-04-15  

FCK 现在也在用 非常好 但要弄好它 还是得好好研究