报表中使用fckEditor

需求分析:

客户想在报表展示的时候可以实时的对输入文本的样式进行控制,润乾中提供了多种填报编辑风格,并不能实现客户该需求,但润乾支持自定义控件,我们还可以考虑通过已有的fckEditor组件来实现该需求。

需求实现:

1. 设计报表,将C10单元格数据类型设置为HTML,单元格中内容为”<textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”></textarea>“,详细设置如下图所示:

2.在工程中加上fck组件,把WebContent下除了web-inf文件夹之外全部拷到你工程的root下。

3.在工程中的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>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>/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>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>

</servlet-mapping>

<servlet-mapping>

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

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

</servlet-mapping>

4.在应用中导入包,在发布报表的JSP中引入组件所使用的JS

5.发布应用访问报表,我们能看到可编辑输入字体样式的FCK组件就成功的与报表结合了。

当你编辑完该单元格中的内容后,可以点击左侧的上三角将其收起,方便我们查看输入的内容。

需求总结:

本例只是在报表中引入FCK组件,而在实际应用中对于这种可输入的报表我们最终都是以入库为目的的,但是按照我们通常设置单元格更新属性的方式获得的只是单元格的内容,并不带有相应的样式,所以为了我们的FCK有着实际的意义,我们需要采取其他方式入库,关于入库方式会在后续的文档中介绍。

热门文章