在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中也可以。

 

posted on 2014-04-02 20:32  dranyu  阅读(739)  评论(0编辑  收藏  举报