web报表开发软件FineReport中如何在线编辑HTML

1、集成ckeditor将下载好的zip文件解压，把ckeditor，flash，image三个文件夹拷至%FR_Home%/WebReport目录下。注：可视化html编辑器支持快捷键（与word相同），支持插入图片和flash，其中图片和flash要放在固定位置，图片放在image文件夹下，flash放在flash文件夹下。

2、模板制作数据准备这里直接使用FR的内置数据库FRDemo，在FRDemo中新建一张表test，表中有二个字段，分别是id，detail，id为主键，数据类型为自动编号，detail数据类型为备注型（由于是以html格式存储的，直接用文本型，内存会不够），如下图：

5、模板样式整个报表主体如下图：B6,G6，单元格的显示方式为以HTML显示，即单击单元格，在右侧下方的单元格属性表中选择其他属性，显示内容选择以HTML显示内容。A列隐藏。

7、给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来定位单元格，并将这两个值随意放置在某个单元格中，用这两个单元格做中介，传递行和列。

8、给I3添加点击事件，js如下：var text=CK苇质缵爨EDITOR.instances.editor1.getData().replaceAl造婷用痃l(" ","\r");contentPane.curLGP.setCellValue(1,5,text);contentPane.curLGP.fireCellValueChange(contentPane.curLGP.getTDCell(1,5), text);this.setEnable(false);这段代码的意思是获取html编辑器中已经重新编辑了的数据，并将该数据传回B6单元格。

9、给K3添加点击事件，js如下：CKEDITOR.instances.editor1.setData("请输入您的内容");

10、填报属性设置选择模板>模板填报属性设置，添加内置sql，如下图：

13、编辑内容点击编辑按钮，输入需要公布的公告，点击内容确认，左侧出现刚刚所编辑得内容，如下图：

15、插入图片仅仅使用文字描述，会觉得这个公告不是很抢眼，下面插入图片，使之更加生动。点击编辑按钮，光标放置在标题上方，点击图片按钮，将图片导入进来如下图：