从FCKEDITOR到ckeditor(一)----升级,使用,配置

     本人才疏学浅，孤陋寡闻，如有不到之处，还请各位指点错误，难免遗漏，贴以此文以便抛砖引玉，希望对您我都有点点帮助，我想这也是写BLog的原因，也算是和大家分享经验吧。

    （附加声明：我并不反对转载，但每当我看到自己撰写的博文被转并且删掉出处和作者就非常反感！恳请您保留本BLog出处--CDSN Blog,顺便捎带保留我的网络名字或邮箱好吗？）

     Fckeditor自从升到3.0版本以后更名为ckeditor了，根据官网声明发现 ckeditor重新定义了编辑器的类和属性方法，并且提升了脚本性能和效率，功能更加完善和强大。但是，假设您的项目里以前使用了Fckeditor低版本，想要平滑升级到ckeditor3.0以上，不想改变代码那几乎是不可能了，这一点不能不说是遗憾，作为开源软件，牺牲的就是您的精力，得到的是它免费的使用和文档以及服务的缺憾！老天总是公平的，得到这个同时就要失去那个，无非是卖点不同罢了。废话少说，我们还是看看如何把FCKEditor升级到ckeditor 吧？

 

   

首先，下载ckeditor的源包。这一点我想都会，解压以后把ckeditor目录部署到您的项目目录中即可；

其次，删除旧的FCKEDITOR目录；

再次，修改页面调用FCKeditor的代码，转换为新的脚本调用方式。

 

ckeditor3.0目录结构：

ckeditor/

adapters

images

lang

plugins

skins

themes

 

除了这些目录外的其他带_下划线的目录可以在部署时删除，当然您要想查看它的源代码的话，暂时保留那个_source目录。告诉你个秘密，这个家伙里头包含了所有的源代码，要想扩展它，就必须阅读它哦。

ckeditor根目录下的ckeditor.js文件是提供给您页面调用的文件，里面的js脚本是经过压缩优化的代码，读懂它简直就是天方夜潭。

假设您的A.JSP页面或者A.FTL页面里使用了Fckeditor,那么首先把

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

放到开头吧，然后把关于FCKEDITOR的旧代码统统删除掉，注意把原来那个text的名字记住，然后改成这样就ok了：

<textarea id="my_Desc" name="ny_Desc" style="WIDTH: 100%;"><!--这个地方您可以放置预先加载的内容，无论是静态的还是动态的标签，由您了。--></textarea>
<script type="text/javascript">
replaceEditor("my_Desc");
</script>

 

注意，页面里必须放置一个textarea，以便ckeditor来替换它。

 

replaceEditor是我自定义的一个辅助方法，您可以这样

var editor;
//将文本区域对象或者div替换为 html编辑器并返回  
var replaceEditor=function ( objname )
{
    var obj = document.getElementById(objname);
    if  (obj) editor = CKEDITOR.replace(objname,
      {//这里可以指定其他参数什么的，比如 filebrowserBrowseUrl等等});
     return editor;
}

 

以后就可以直接调这个editor了，当然您或许有自己更好的办法，我这里只做个参考。

 

好了，刷新一下页面，就可看到它的庐山真面目了

对了，我不想看到那个“源代码”按钮和“保存”按钮，也不想让用户看到实体路径，怎么办？

打开config.js:

加上以下代码

config.toolbar=[['Save','NewPage','Preview','-','Templates'],
     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
     '/',
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
      ['Link','Unlink','Anchor'],
      ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',
      'PageBreak'],
     '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor'],
     ['Maximize','ShowBlocks','-','About']];

  config.removePlugins = 'elementspath,save';

好了。

 

ckeditor的上传功能已经被分离出去，您可以使用ckfinder来实现它，并且能扩展出更加灵活的功能。

那么，我们使用java开发的朋友怎么办？我觉得可以自己写一个上传的对话框挂接上去，把最后的文件url传给ckeditor实例即可，我会在接下来的文章当中提供一点点建议。

另外就是，我已经成功地把webeq（公式编辑器）结合到了ckeditor，并做了小小的修改，ckeditor的插件功能实在太强大了，希望我在以后的时间里和大家一起分享我的经验和技巧！

 

谢谢关注！

 

从FCKEDITOR到ckeditor(二)----自定义插件对话框

从FCKEDITOR到ckeditor(三)----WebEq公式编辑器的嵌入