Sturts中使用CKEditor

CKEditor是sourceforge.net上面的一个开源项目，主要是实现在线网页编辑器的功能。下载地址是http://ckeditor.com/download。

1.解压ckeditor_3.5.2.zip，将ckeditor文件夹复制到webroot下的js目录下。

2.打开config.js，进行配置。

  CKEDITOR.editorConfig = function(config) { config.language = 'zh-cn'; // 配置语言 config.uiColor = '#FFF'; // 背景颜色 config.width = 'auto'; // 宽度 config.height = '300px'; // 高度 config.skin = 'office2003';//界面v2,kama,office2003 config.toolbar = 'Full';// 工具栏风格Full,Basic }; 

3.在jsp页面使用CKEditor。

   导入ckeditor.js文件。 

 

<mce:script type="text/javascript" src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"><!-- // --></mce:script> 

   CKEditor有下面3中使用方式：

   第一种 通过class属性替换textarea元素。

   <html:form action="/RegUser"> 简历：<br /> <textarea class="ckeditor" cols="80" id="resume" name="user.resume" rows="10" > <!-- 完成表单校验出错后回到输入jsp页面时还能保留CKEditor中上次输入的代码 --> <!-- userForm是这个表单对应Action的FormBean --> ${userForm.user.resume } <textarea/> <html:submit value="注册"></html:submit>

   第二种 通过javascript代码来替换textarea元素：

   <html:form action="/RegUser"> 简历：<br /> <textarea cols="80" id="resume" name="user.resume" rows="10" > <!-- 完成表单校验出错后回到输入jsp页面时还能保留CKEditor中上次输入的代码 --> <!-- userForm是这个表单对应Action的FormBean --> ${userForm.user.resume } <textarea/> <mce:script type="text/javascript"><!-- 参数resume对应textarea标签中的id属性的值 --> var editor = CKEDITOR.replace('resume'); // --></mce:script><hr /> <html:submit value="注册"></html:submit> 

   第三种 插入一个JavaScript调用，用来编辑整个页面。

   <html:form action="/RegUser"> 简历：<br /> <textarea class="ckeditor" cols="80" id="resume" name="user.resume" rows="10" > <!-- 完成表单校验出错后回到输入jsp页面时还能保留CKEditor中上次输入的代码 --> <!-- userForm是这个表单对应Action的FormBean --> ${userForm.user.resume } <textarea/> <mce:script type="text/javascript"><!-- 参数resume对应textarea标签中的id属性的值 --> var editor = CKEDITOR.replace('resume'， {fullPage : true}); // --></mce:script><hr /> <html:submit value="注册"></html:submit> 

 

 

---