jforum增加fckeditor编辑器

1、 应jforum原有的BBcode编辑器不能实现动态编辑图片功能，故选择 fckeditor富文本编辑器。
2、 首先，在http://ckeditor.com/download 下载最新源码。本例当前使用的是FCKeditor_2.6.4.zip版本。
3、 将其解压，参考其目录下fckeditor2.6\_samples\html的页面引用方式。
4、 修改其上传功能，fckeditor2.6/目录下fckconfig.js 文件修改图片处理的功能页面
     FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;
改为：FCKConfig.ImageUploadURL = '/upload_img.jsp?Type=Image' ; 自己定义的根目录下的upload_img.jsp页面。
5、 打开fckeditor2.6\editor\dialog\fck_img.html 页面。这个页面是点击上传图片菜单时弹出的对话框。
在其中找到：
<div id="divUpload" style="display: none">
<form id="frmUpload" method="post" target="UploadWindow" enctype="multipart/form-data"
action="" onsubmit="return CheckUpload();">
<span fcklang="DlgLnkUpload">Upload</span><br />
<input id="txtUploadFile" style="width: 100%" type="file" size="40" name="NewFile" /><br />
<br />
<input id="btnUpload" type="submit" value="Send it to the Server" fcklang="DlgLnkBtnUpload" />
<script type="text/javascript">
document.write( '<iframe name="UploadWindow" style="display: none" src="' + FCKTools.GetVoidUrl() + '"><\/iframe>' ) ; </script> </form> </div>
可以看出该form先功能页面传递了NewFile 字段
6、 编写fck_img.jsp功能页面接受Newfile字段 上传本地文件，并返回链接地址给编辑器：
  <%   if(request.getMethod().equals("POST")) {  
    ImgOp io=new ImgOp();
    Doc doc=io.UpLoadImg(request,response); 
  out.println("<script type='text/javascript'>");
  out.println("window.parent.OnUploadCompleted(0,'"+ doc.get("surl") +"','','' ); " );
out.println("</script>" );
}
%>这里上传功能类，就不做详细介绍。
7、 把解压后的FCKeditor文件放入工程跟目录，
8、 修改jforum发帖页面JForum\templates\default\post_form.htm依照fckeditor sample提供的方法，在页面加上js引用
<script type="text/javascript">
window.onload = function(){
var sBasePath = '/fckeditor/' ;
var oFCKeditor = new FCKeditor( 'message') ;
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = '400';
oFCKeditor.Width = '100%';
oFCKeditor.ReplaceTextarea() ;
}
修改：<tr><td valign="top"><textarea name="message"  class="message" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" tabindex="3"  rows="65"  cols="35" ><#if post?exists><#if quote?exists>[quote=${quoteUser}]${post.text?html}<#else>${post.text?html}</#if></#if></textarea>
</td></tr>
其中：message 字段要对应。
启动工程可看到编辑页面，关于BBcode 代码页面 可屏蔽。
9、 关于自定义菜单 可在fckedtior\fckconfig.js目录下自定义 菜单类似 default、basic 。然后在fckedtior\fckeditor.js
修改：this.ToolbarSet = toolbarSet || 'Default' ;该 default为 自己定义的名称。
【结论】
小结：
Fckeditor 现有jsp版本的由于jforum使用freemarker做为显示方式，未提供jsp页面所以使用原始版本。

评论

2 楼 tanchong 2011-03-03  

[span]bbbb[/span]

1 楼 tanchong 2011-03-03  

   <span>bbbb</span>