`
speed_guo
  • 浏览: 314493 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论

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

fckeditorJavaServletJSPJavaScript 
阅读更多

在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>

 

分享到：
| jQuery1.2.6 API开发文档
评论
2 楼 speed_guo 2010-04-15  
mikkjl 写道
FCK 现在也在用 非常好 但要弄好它 还是得好好研究

总的来说，FCK还不错，不过有点大，相对webEditor要大多了，还有要想更多的了解它，可以看下它的外部引用，自定义函数来引用FCK里的函数，我做了一个锚点的外部引用，这方面有点麻烦，要对JS比较了解。
1 楼 mikkjl 2010-04-15  
FCK 现在也在用 非常好 但要弄好它 还是得好好研究
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java fckeditor所需jar包

    - **HTML集成**：在客户端页面中，通过JavaScript调用FCKeditor，并设置编辑器的配置参数。 3. **主要功能** - **文本格式化**：FCKeditor支持字体、字号、颜色、对齐方式等基本格式设置。 - **链接管理**：可以...

    FCKeditor配置for java

    然后通过JavaScript调用`FCKeditor.Replace()`方法来初始化编辑器： ```html &lt;textarea id="myEditor" name="myEditor"&gt;&lt;/textarea&gt; &lt;script type="text/javascript"&gt; window.onload = function() { var oFCKeditor...

    FCKeditor (jsp在线编辑器)配置总结

    当用户完成编辑并提交表单时，需要将FCKeditor中的内容获取出来并保存。这可以通过调用`oFCKeditor.Value`属性实现。例如： ```jsp String editorContent = request.getParameter("editor1") ; // 将editorContent...

    FCKeditor使用指南

    - **将FCKeditor中的内容是否有改动的值重新设置** #### 8. 外联编辑条(多个编辑域共用一个编辑条) - 实现多个编辑域共享相同的工具栏。 #### 9. 解释fck样式(CSS)的工作原理 - 了解FCKeditor如何使用CSS来渲染...

    FCK在线编译器JSP自定义函数Proxool连接池配置信息.

    首先，`FCK在线编译器`是基于JavaScript的开源富文本编辑器，它提供了类似于Word的界面，使得用户可以在网页上进行文本格式化、插入图片、链接等操作。开发者可以通过自定义函数来扩展FCKeditor的功能，比如创建特定...

    FCK在线文本编辑器的用法

    2. **自定义标签**：在HTML中使用自定义标签来嵌入编辑器，例如`&lt;fckeditor&gt;`。 3. **FCKeditor API调用**：利用提供的API接口进行更复杂的功能控制和定制。 在实际应用中，需要将FCKeditor的核心类库文件放置在...

    fckeditor 可应用于各个浏览器

    2. **创建编辑器实例**：在HTML代码中，通过`&lt;textarea&gt;`标签创建一个编辑区域，然后使用JavaScript调用FCKeditor的初始化函数，将这个文本区域转换为富文本编辑器。 3. **配置参数**：可以通过配置参数来定制...

    Fck编辑器基本使用.doc

    此文件定义了编辑器的自定义标签库，使得在JSP页面中可以直接调用编辑器组件。 ##### 步骤4：配置Web.xml文件 - 将示例中的配置内容添加到项目中的`web.xml`文件中，并根据实际情况调整Servlet的路径配置。这一步是...

    FCKeditor简单实例（eclipse测试可用）

    3. **创建编辑器实例**：在HTML代码中，通过JavaScript调用FCKeditor的`FCKeditor()`函数来创建编辑器实例。例如： ```html &lt;textarea id="myEditor"&gt;&lt;/textarea&gt; &lt;script type="text/javascript"&gt; var ...

    FCKEditor试用指南

    也可以通过自定义标签的方式在 JSP 页面中创建 FCKEditor 实例。 ##### 3.3 FCKEditor API 调用 API 调用可以让开发者更加灵活地操作编辑器。 ##### 3.4 适时打开编辑器 根据业务需求，可以在特定条件下打开编辑...

    FCKeditor的简单使用

    在Java环境下，FCKeditor通常通过JavaScript调用来实现与服务器端的交互。当用户在编辑器中完成内容编辑后，编辑器会将HTML代码作为字符串发送到服务器，然后由Java后端进行处理。Java开发者可以使用各种框架，如...

    FCK富文本编辑器

    3. **集成**：将FCKeditor的JavaScript文件引入到需要使用编辑器的HTML页面中，通常通过`&lt;script&gt;`标签引入`fckeditor.js`。 4. **配置**：通过配置文件`fckconfig.js`来调整编辑器的参数，例如默认语言、允许的...

    FCKeditor文本编辑器

    在实际使用中，开发者会将这些文件部署到Web服务器，并通过JavaScript API调用FCKeditor的功能。用户可以在浏览器中看到一个完整的文本编辑界面，包括字体选择、字号调整、颜色设定、插入图片、链接管理等常见功能。...

    FCKeditor 部署

    4. **个性化配置**：FCKeditor可以通过修改配置文件`fckeditor/editor/config.js`来自定义编辑器的行为。例如，你可以设置默认字体、字号、允许的文件上传类型等。 5. **文件管理器集成**：FCKeditor支持内置的文件...

    FCK jsp应用实例

    3. **创建编辑器实例**：在JSP中，通过JavaScript调用`FCKeditor.Create()`函数来创建编辑器实例，指定编辑器的ID以及在页面上的占位元素。 ```jsp &lt;%@ page language="java" contentType="text/html; charset=UTF-...

    FCKeditor的开发手册

    - **将数据展示在FCKeditor中**: 可以通过特定方法将从后端获取的数据展示在编辑器中。 #### 五、FCKeditor API调用 - **获得FCKeditor实例**: 可以根据不同的场景获取当前页面或其他页面中的FCKeditor实例。 - **...

    FCKEditor 笔记

    首先，引入FCKEditor到J2EE项目中，你需要在JSP页面中添加相应的标签库引用。例如，添加以下代码： ```jsp &lt;%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %&gt; &lt;FCK:editor instanceName="EditorDefault" ...

    web编辑器fckeditor ,JSP里使用

    3. **配置路径**：在JSP页面中，需要设置编辑器的路径，通常通过`&lt;script&gt;`标签引入FCKeditor的JavaScript文件，并指定编辑器实例的路径。 4. **创建编辑器实例**：在JSP页面中使用JavaScript创建FCKeditor实例，...

Magicbox
Global site tag (gtag.js) - Google Analytics