在JSP中使用CKEditor网页编辑器
为了在我的一个项目使用CKEditor网页编辑器,我开始了寻找应用之法。
我下载了ckeditor_4.3.3_standard和ckeditor-java-core-3.5.3。
之前的版本和现在版本的使用好像不一样。
参考了《HTML编辑器FCKeditor使用详解》:
其版本是“FCKeditor 2.5.1(FCKeditor_2.5.1.zip)和FCKeditor.Java(FCKeditor-2.3.zip)”
发现不能使用。
然后我直接找到“http://nightly.ckeditor.com/14-04-02-06-05/standard/samples/”官方网站的使用说明。
其实ckeditor 4.0以后的编辑器使用javascript来写,可直接使用。
使用<script src="/ckeditor/ckeditor.js"></script>导入保存在根目录下的/ckeditor/ckeditor.js脚本,
然后在页面上使用如下代码即可(一定要使用class为ckeditor):
<textarea class="ckeditor" name="editor1"></textarea>
还可以使用Id:
<textarea cols="80" id="editor1" name="editor1" rows="10"> | |
</textarea> | |
<script> | |
// This call can be placed at any point after the | |
// <textarea>, or inside a <head><script> in a | |
// window.onload event handler. | |
// Replace the <textarea id="editor"> with an CKEditor | |
// instance, using default configurations. | |
CKEDITOR.replace( 'editor1' ); | |
</script> |
在项目做如下修改。
(1)将javascript脚本添加到页面中:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
(2)删除之前的editor网页编辑器的内容,再适当地修改textarea的参数:
<OBJECT id="HTML" data="/acmhome/judge/editor.html" width="100%" height="360" type="text/x-scriptlet"></object>
<html:textarea property="answer" style="DISPLAY:none"></html:textarea>
删除第一行,修改第二行,将style的属性删除,其他保持不便。
(3)修改javascript函数调用
*删除原来有javascript函数调用:
<body bgColor=white onload="pageonloadM()" id="nicetabs">
<html:submit onclick="bs();"><bean:message key="button.submit"/></html:submit>
*编写自己的javascript函数:
//初始化网页编辑器
function initEditor(){
var f = document.newproblemForm;
CKEDITOR.replace( f.description);
CKEDITOR.replace(f.input );
CKEDITOR.replace( f.output );
CKEDITOR.replace( f.hint );
}
*在网页加载时调用initEditor函数,如下:
<body bgColor=white onload="initEditor()" id="nicetabs">
**************
如果没有显示,那么应该是javascript脚本的标签放置的位置不对,网页不能加载进去,将它的代码放到body中也可以。