要使用ckeditor,当然首先就是去http://ckeditor.com/ (ckeditor网站)下载ckeditor的压缩包,现在最新的是ckeditor_3.3.zip
下载后将压缩包解压,将解压后文件夹中的ckeditor文件夹copy到自己的web项目的WebRoot目录下。
打开ckeditor目录,可以看到文件夹结构如下
ckeditor
---_samples
---_source
---adapters
---images
---lang
---plugins
---skins
---themes
....
---ckeditor.js
---config.js
...
从每个文件夹和每个文件的名字我们就可以很容易看出它们的作用,_samples文件夹下放的自然就是供我们学习如何使用的样例程序了。
拿到一个我们以前没用过的东西,首先要看的当然就是它给的例子了,这可以让我们对这个程序有个整体的了解并快速掌握简单的使用方法。
想要在JSP页面中引用ckeditor是非常简单的一件事,前面我们只要已经将解压的ckeditor文件夹copy到WebRoot目录下了,只需要在jsp文件的代码中要加入ckeditor的位置加上如下代码,(比如我们要在一个form中使用ckeditor)。
下面在index.jsp(笔者建的一个测试页面)中引用ckeditor并测试
String path = request.getContextPath();
%>
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
在此添加内容
CKEDITOR.replace( 'editor1',
{
skin : 'kama',
language : 'zh-cn'
});
比较关键的代码在代码中已用红色和蓝色标出,要能在页面中使用就要先将ckeditor目录下的ckeditor.js加入页面
form表单的写法还如我们未使用ckeditor时一样,只需要在页面中加入一段javascript代码,上面已经用蓝色
标出.
CKEDITOR.replace('要用ckeditor取代的textarea的name属性值或id属性值',{要设置的ckeditor属性:属性值,......});
上面的蓝色代码显示我将editor的皮肤风格设置为kama,在ckeditor的skins文件夹下默认还有office2003和vi两种皮肤风格
将ckedit