1.到fckeditor网站下载相关的fckeditor插件的压缩包,然后寻找相关的使用文档。通常在developer那个相关类别中,如上一篇日志就是在其网站上查找到的相关文档。
2.将其解压并粘贴到工程的根目录即是WebRoot中,对于有红叉的点击右键-->MyEclipse-->Exclude Form Validation来忽略它的错误。
3.在head文件中进行调用其内部的js文件。如下所示,其中很重要的是第二个Script文件中的replace文件名要与body中的textarea中的name的名字要相同。
4.我调试的最主要的错误在于:网站上的技术文档中指明第一个javascript中的src中应该写为“src="/ckeditor/ckeditor.js”,而实际上在操作的时候第一个“/”应该去掉,即是编程所谓的src="ckeditor/ckeditor.js”。然后就调试成功了,相比于就插件的页面,新的插件明显的美观得多了。如下图所示:当然这个是简洁版本的,还有功能比较强大一点的,不过要对代码进行设置,即是不要那个basic属性,去掉的代码如下:uiColor:'#CCFFFF'这个值也可以在config.js文件中进行设置,不一定非要在这个地方来进行设置。
,
{
toolbar : 'Basic',
uiColor : '#CCFFFF'
}
5.以下是代码部分:
<%@page language="java" contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8s" />
<title>add Blog content</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1',
{
toolbar : 'Basic',
uiColor : '#CCFFFF'
} );
};
</script>
</head>
<body>
<p>请输入博客内容</p>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0">
<tr>
<th width="8%" scope="row">主题:</th>
<td width="92%"><label>
<input name="title" type="text" id="title" size="60" />
</label></td>
</tr>
<tr>
<th scope="row">类别:</th>
<td><label>
<select name="select">
<option value="1">心情故事</option>
<option value="2">旅游的故事</option>
</select>
</label></td>
</tr>
<tr>
<th scope="row">内容:</th>
<td><label>
<textarea name="editor1" cols="58" rows="15" id="editor1"></textarea>
</label></td>
</tr>
<tr>
<th scope="row"><label>
<input name="reset" type="reset" id="reset" value="重置" />
</label></th>
<td><label>
<input name="Submit" type="submit" id="Submit" value="提交" />
</label></td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>