富文本编辑器ckeditor使用手册

富文本编辑器ckeditor使用手册

一.环境配置

1 在web.xml配置servlet

multiform

com.newtouch.upload.servlet.MultiFormServlet

1

multiform

/multiform

2 将插件ckeditor及upload文件夹（用于图片上传功能）添加至工程中。

二. 如何在项目中使用ckeditor？

将标签textarea中的isRich属性设置为true即可textarea替换成ckeditor。

三.在textarea标签中有哪几个属性设置与ckeditor有关？分别有哪些作用？

toolbarType：提供了三种工具栏的布局，分别是full，normal，basic。

customToolBar：如果在开发中有特殊的需求导致提供的三种默认的工具栏布局无法满足项目需求，开发者可以自定义工具栏中的选项，以及其排列。

开发者可以将所需要的工具栏以逗号为分隔符进行排列。目前共提供12

类工具栏。

（1）source：包含source按钮。

（2）system：系统类按钮，包括保存，新建，预览。

（3）templates：包含模板按钮，可以利用所提供的模板进行文字图片

的编辑。

（4）textOperation：包括一些文本操作的按钮，例如剪切，复制，粘

贴等。

（5）print：打印类按钮，包括打印，拼写检查等。

（6）operation：操作类按钮，包括撤销，重做，查询等。

（7）fontStyle：字体风格设置类按钮，包括文字的颜色，字体等设置。

（8）link：超链接类按钮，包括超链接设置等。

（9）mark：标记类按钮，包括编号列表，项目列表，文字对齐方式等。

（10）image：包含图片上传、表情、表格等按钮。

（11）other：其他类按钮。包含一些诸如表单、复选框、单选框、列表

等。

（12）about：包含about按钮。

（13）/：可以进行工具栏之间的换行设置。

注：如果同时设置了toolbarType和customToolBar属性，默认是以customToolBar属性优先。

browserUrl：指定ckeditor中上传后的图片浏览页面的地址。

UploadUrl：指定ckeditor中图片上传相关的servlet路径。

四．关于图片上传功能，我能否自定义图片上传的路径，图片上传的格式限制，图片的保存方式等相关设定？

可以。通过继承MultiFormHandle接口类。

其中包括两个函数。

（1）public String[] allowExt();指定图片上传的格式限制。实例如下

public String[] allowExt() {

return new String[]{"jpg","bmp"};

}

（2）public List handle(MultiFormPrepare multiForm) throws Exception;

返回值List中为所上传图片的路径。

通过如下代码来获取文件信息。

Map fileMap = multiForm.getFileItems();

FileItem file = fileMap.get("upload");

FileItem类中提供如下方法可以获得文件的相关信息。

getFileName：获取文件名。

getExtension：获取文件扩展名。

getV alue：获取文件流。

通过实现该接口，开发者可以自由选择图片的保存方式及其它工作。

注：在demo0.3.2中有ckeditor的实现实例可以进行参考。