肉包子的摇滚生活

Supesite的后台编辑器是ss自己写的，不怎么好用，尤其是查看源代码的功能，所有代码都粘在一起，没有格式化，根本看不了，跟discuz论坛的编辑器对比起来差距太大了，估计这个编辑器是comsenz早期出的东西，supesite一直没有更新，所以编辑器太古董了。最近有些受不了，决定将supesite的编辑器替换为业内目前流行的ckeditor，ckeditor的前身就是fckeditor，相信做web的应该都会听过。

替换supesite的编辑器，主要存在几个问题：

1. Javascript代码的兼容性，引入ckeditor的js代码，是否会与网站原先的代码产生冲突？
2. 分页插入。supesite的分页机制较为特殊，与编辑器的结合比较紧密，它的各个分页都是存为一条数据库记录。引入新的编辑器对分页会有不小的影响。
3. 插入图片功能，supesite的图片上传组件是独立的，引入ckeditor的话需要跟ckeditor再进行融合。
4. 原有的编辑器的一些特殊功能，插入分页标志，远程下载图片，需要重写并融入ckeditor。

逐一解决。

引入ckeditor

下载ckeditor，将整个目录放在supesite的目录下面。包不算很大吧，不过我还是删除了很多无用的语言文件，代码洁癖…没办法…

修改 supesite/admin/tpl/header.htm，删除原有的editor的js的引入，引入ckeditor的代码。

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

修改supesite/admin/tpl/spacenews.htm，去掉原先的editor的编辑器的初始化代码，改为ckeditor的模式。

原先是：

<div id="fulledit"><div id="message"></div></div>

<script type="text/javascript">

function init() {

<!--{if checkperm('allowpostattach')}-->

et = new word("message", "$thevalue[message]", 0, 1);

<!--{else}-->

et = new word("message", "$thevalue[message]", 0, 3);

<!--{/if}-->

}

if(window.Event) {

window.onload = init;

} else {

init();

}

</script>

改成：

<textarea cols="80" id="message" name="message" rows="10">$thevalue[message]</textarea>
 <script type="text/javascript">
 //<![CDATA[
 CKEDITOR.replace( 'message' );
 //]]>
 </script>

OK，刷新下页面。。你就可能看到界面已经变成ckeditor了。华丽丽的ckeditor！同时，我所担心的Javascript兼容问题没有出现，看了ckeditor这方面的确做得相当不错。

如果你需要的编辑功能很少，到这一步你基本上就可以结束了，基本的编辑功能都ok了。不过如果你是做资讯类的网站，需要大量使用编辑器的各项功能，那还是要做完整的替换修改方案。

插入图片功能

插入图片功能的实现，是在supesite/function/common.func.php中的getuploadinserthtml函数，因为编辑器的替换，原先的插入图片无法找到原来的编辑区域，所以，只需要将原有的插入代码改成插入到ckeditor的插入代码即可。这里涉及到了ckeditor的一些接口方法调用。

原先的代码：

$inserthtml .= ' | <a href="javascript:;" onClick="insertHtml(\''.shtmlspecialchars($thehtml).'\');return false;">'.($isimg?$lang['insert']:$lang['insert_attachments']).'</a>';
 if(!empty($thehtmlsmallpic)) {
 $inserthtml .= ' | <a href="javascript:;" onClick="insertHtml(\''.shtmlspecialchars($thehtmlsmallpic).'\');return false;">'.$lang['insertsmall'].'</a>';
 }

修改后的代码：

$inserthtml .= ' | <a href="javascript:;" onClick="CKEDITOR.instances.message.insertHtml(\''.shtmlspecialchars($thehtml).'\');return false;">'.($isimg?$lang['insert']:$lang['insert_attachments']).'</a>';
 if(!empty($thehtmlsmallpic)) {
 $inserthtml .= ' | <a href="javascript:;" onClick="CKEDITOR.instances.message.insertHtml(\''.shtmlspecialchars($thehtmlsmallpic).'\');return false;">'.$lang['insertsmall'].'</a>';
 }

OK,搞定插入图片功能。

插入分页标志与远程下载图片功能

这2个功能的实现，就需要做ckeditor的插件开发了。

未完待续。

具体涉及的代码较多，有需要的同学可以邮箱联系我了解。fangyuqiang@gmail.com