jsp+FCKEditor+CKEditor
一、FCKEditor
上官方网站：www.fckeditor.net 下载最新版本FCKeditor，将其中的fckeditor文件夹复制到WebRoot下面。找到fckconfig.js文件进行编辑，可参考FCKConfig.ToolbarSets["Default"] =[ ]
[ ]里面的选项可根据自己喜好进行选择，然后取名FCKConfig.ToolbarSets["你取的工具条名称"] 。接下来如果想在页面通过标签嵌入方式显示效果的话必须添加java-coreX.X.jar包来获取FCK的相应标签。JSP页面中使用FCKEditor，有两种方式：
第一、标签方式
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
在需要使用编辑器的地方加入
<FCK:editor id="content" width="85%" height="300px">
</FCK:editor> 例如
<td></td>标签中，经过解析后生成如下代码
第二、JavaScript方式，这种方式不需要导入标签
jsp页面引入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload(function(){
var oFCKeditor=new FCKeditor('MyTextarea');
oFCKeditor.BasePath="fckeditor/";
oFCKeditor.ReplaceTextarea();
});
</script>
文本域为：<textarea rows="4" cols="60" name="MyTextarea"></textarea>
二、CKEditor则更加方便快捷
上官方网站：www.fckeditor.net 下载最新版本FCKeditor，将其中的fckeditor文件夹复制到WebRoot下面。
在jsp页面引入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<form method="post">
My Editor:<br />
<textarea id="editor1" name="editor1" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
<input type="submit" />
</form>
第一、CKEditor的皮肤更换，定制皮肤：卡马，office2003,第二版皮肤
CKEDITOR.replace( 'editor_kama',
{
skin : 'kama'
});
其中eidor_kama为textera的名称，可以改变。
skin可选的值有v2,office2003,kama
第二、用户界面颜色选择器
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'uicolor',
uiColor: 'yellow',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
其中uiColor的值为初始页面的颜色可以为各种颜色green,yellow,red,blue等等
['UIColor']为真正出现的在工具条中的颜色选择器
三、用js给fckeditor赋值、取值的办法
//获取编辑器中HTML内容
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
//获取编辑器中文字内容
function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerText);
}
//设置编辑器中内容
function SetEditorContents(EditorName, ContentStr) {
var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
oEditor.SetHTML(ContentStr) ;
}
赋值：
Java代码
var oEditor = FCKeditorAPI.GetInstance('ncontent');
oEditor.SetHTML(“三菱电机法拉撕开对方”);
还有一个使用的是jquery来实现
jQuery FCKEditor插件取值、赋值
第一步：导入需要的js文件（根据实际情况修改相应路径）
Java代码
<script src="../js/jquery.js" type=text/javascript></script>
<script src="../js/jquery.FCKEditor.js" type=text/javascript></script>
<script src="../fckeditor/fckeditor.js" type="text/javascript"></script>
<script src="../js/jquery.js" type=text/javascript></script>
第二步：初始化（根据实际情况修改相应路径）
Java代码
//初始化FCKEditor
$.fck.config = {path: '/这里是你的项目名称/fckeditor/', height: 400 ,toolbar:'Default'};
$('textarea#ncontent').fck();
//初始化FCKEditor
$.fck.config = {path: '/这里是你的项目名称/fckeditor/', height: 400 ,toolbar:'Default'};
$('textarea#ncontent').fck();
其中#ncontent为页面你所绑定的textArea的id或name
第三步：取值
Java代码
var getcontent = $.fck.content('ncontent', ''); //其中ncontent为页面你所绑定的textarea的id或name
第四步：赋值（更新的时候先把原有的值赋给textarea）
Java代码
var oEditor = FCKeditorAPI.GetInstance('ncontent');
oEditor.SetHTML(data.news_add.na_newscontent);