在线编辑HTML

编辑
文档创建者:文档助手1 (67727 )     浏览次数:5159次     编辑次数:14次     最近更新:znswhx 于 2018-02-24     

目录:

1. 问题描述编辑

FineReport报表支持多种单元格内容显示,支持默认显示,以图片显示,以HTML显示以及以下载链接显示二进制内容四种方式,常用的是默认显示,即单元格中本身是什么内容,就显示什么,详细参照单元格其他属性
在实际应用中,为了实现一些特殊效果,很多数据库字段里面存的是html,那么在使用FineReport的时候,就必然要借助以HTML显示来展示数据库中字段内容,但是,这样就带来一个问题,在进行数据填报的时候,就需要使用HTML标签来保证该特殊样式,这样就会非常麻烦,并且通用性很低,那么问题该怎么解决呢?

2. 解决思路编辑

将开源的HTML编辑器集成到FineReport系统中,只需要输入文字,保存的即为html元素,并且还可以随时在浏览器端修改字体的各种样式,而不需要通过设计器在后台去改报表,这里使用的html编辑器为ckeditor,下载地址为ckeditor,通过js控制使html编辑器获取单元格的内容,在html编辑器中修改单元格的内容,修改完成之后,点击确定,将修改后的值赋给单元格,此时,单元格的内容为html的形式,提交时,就则把单元格的内容提交至数据库。

3. 解决方案编辑

示例:某某公司使用集成了FineReport,需要使用FineReport制作一张报表,该报表为该公司首页的公告栏,每天发布不同的公告,能够实现图片和文字共存,并且由于公告的特殊性,每次显示内容的样式都会根据内容的不同而不同。
3.1 集成ckeditor
将下载好的zip文件解压,把ckeditor文件夹拷至%FR_Home%/WebReport目录下。
注:可视化html编辑器支持快捷键(与word相同),支持插入图片和flash,其中图片和flash要放在固定位置%FR_Home%/WebReport下,或者可以新建两个文件夹,分别放图片和flash文件。
3.2 模板制作
数据准备
这里直接使用FR的内置数据库FRDemo,在FRDemo中新建一张表test,表中有二个字段,分别是id,detail,id为主键,数据类型为自动编号,detail数据类型为备注型(由于是以html格式存储的,直接用文本型,内存会不够),如下图:
数据集准备
新建模板数据集ds1:SELECT * FROM test
外部js导入
选择模板>模板web属性>引用JavaScript导入ckeditor里面的ckeditor.js,如下图:
222
模板样式
整个报表主体如下图:
222
B6,G6,单元格的显示方式为以HTML显示,即单击单元格,在右侧下方的单元格属性表中选择其他属性,显示内容选择以HTML显示内容。
A列隐藏。
G6单元格的内容为:
<textarea id="editor1" name="editor1"><p>请编辑您的内容</p></textarea>
G3,I3,K3是三个按钮,设置如下:
控件    G3I3  K3  
  控件名称  编辑  内容确认  重置内容
  控件名  -  up  -
  作用  修改detail字段  确认HTML编辑器编辑无误  清空HTML编辑器
给G3添加点击事件,js如下
text= contentPane.curLGP.getCellValue(1,5); CKEDITOR.instances.editor1.setData(text); contentPane.curLGP.write.getWidgetByName("up").setEnable(true); 
上述代码中,通过getCellValue函数获取B6单元格的值,并将该值赋给html编辑器,内容确认按钮可用。
注:如果获取的单元格的值是一个扩展的单元格,则可用row和col来定位单元格,并将这两个值随意放置在某个单元格中,用这两个单元格做中介,传递行和列。
给I3添加点击事件,js如下:
var text=CKEDITOR.instances.editor1.getData().replaceAll(" ","\r"); contentPane.curLGP.setCellValue(1,5,text); contentPane.curLGP.fireCellValueChange (contentPane.curLGP.getTDCell(1,5), text); this.setEnable(false);
这段代码的意思是获取html编辑器中已经重新编辑了的数据,并将该数据传回B6单元格。
给K3添加点击事件,js如下:
CKEDITOR.instances.editor1.setData("请输入您的内容");
填报属性设置
选择模板>报表填报属性,添加内置sql,如下图:
222
添加加载结束事件
模板>模板web属性>填报页面设置中选择为该模板单独设置,并添加加载结束事件,js如下:
CKEDITOR.replace( 'editor1' );
注:此处的editor1需跟上面html编辑器单元格中的名字对应。
3.3效果查看
点击填报预览,看到如下图画面:
222
1)编辑内容
点击编辑按钮,输入需要公布的公告,点击内容确认,左侧出现刚刚所编辑的内容,如下图:
222
2)提交
编辑完成之后,点击提交按钮将数据提交入库,刷新该模板,如下图,则可看到数据显示在左侧单元格,如果修改该内容,再次点击编辑,单元格中内容被读取进入到html编辑器中,然后点击重置内容,编辑器中内容被清空,此处输入需要更新的数据,则可更改公告。
222
3)插入图片
仅仅使用文字描述,会觉得这个公告不是很抢眼,下面插入图片,使之更加生动。
点击编辑按钮,光标放置在标题上方,点击图片按钮,将图片导入进来如下图:
222
提交完成之后,效果如下图:
222

附件列表


主题: 设计思路
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201