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格式存储的，直接用文本型，内存会不够），如下图：
3、数据集准备新建模板数据集ds1：SELECT * FROM test。
4、外部js导入选择模板>模板web属性>引用JavaScript导入ckeditor里面的ckeditor.js，如下图：
5、模板样式整个报表主体如下图：B6,G6，单元格的显示方式为以HTML显示，即单击单元格，在右侧下方的单元格属性表中选择其他属性，显示内容选择以HTML显示内容。A列隐藏。
6、G6单元格的内容为：<textarea id="editor1" name="editor1"><p>请编辑您的内容</p>G3，I3，K3是三个按钮，设置如下：
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，如下图：
11、添加加载结束事件在模板>模板web属性>填报页面设置中选择为该模板单独设置，并添加加载结束事件，js如下：CKEDITOR.replace( 'editor1' );注：此处的editor1需跟上面html编辑器单元格中的名字对应。
12、效果查看点击填报预览，看到如下图画面：
13、编辑内容点击编辑按钮，输入需要公布的公告，点击内容确认，左侧出现刚刚所编辑得内容，如下图：
14、提交编辑完成之后，点击提交按钮将数据提交入库，刷新该模板，如下图，则可看到数据显示在左侧单元格，如果修改该内容，再次点击编辑，单元格中内容被读取进入到html编辑器中，然后点击重置内容，编辑器中内容被清空，此处输入需要更新的数据，则可更改公告。
15、插入图片仅仅使用文字描述，会觉得这个公告不是很抢眼，下面插入图片，使之更加生动。点击编辑按钮，光标放置在标题上方，点击图片按钮，将图片导入进来如下图：
16、提交完成之后，效果如下图：
