修改配置fckeditor

最新推荐文章于 2016-02-21 13:27:38 发布

cnruhua

最新推荐文章于 2016-02-21 13:27:38 发布

阅读量110

点赞数 1

分类专栏： php 文章标签： fckeditor PHP QQ HP JavaScript ViewUI

php 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

由于从网上下载的fckeditor过大并且也不适于自己的需要，而4ngel提供的精简版（ http://www.sablog.net/blog/?action=show&id=379 ）又去掉了一些我所需要的功能（比如图片上传），于是萌生了自己修改的想法。说干就干，步骤记录如下：首先从官方网站上下载fckeditor2.6，地址： http://www.fckeditor.net/download ,解压开来后，删除所有以"_"开头的文件夹和文件，另外根目录下只保留以下文件：fckconfig.js，fckeditor.js，fckeditor.php,fckeditor_php5.hp,fckstyles.xml,fcktemplates.xml
默认的编辑器样式是上半部分没有边框的，而4ngel提供的则是有边框的，看起来也更加美观。对此进行修改：

打开editor目录下的fckeditor.html文件，找到 id="xToolbarSpace" 的td行（大概在第271行），修改其style为："overflow: hidden;border:1px solid #696969;border-width:1px 0 0 1px;",此处是设置工具栏的左边框和上边框，再找到id="xCollapseHandle"所在行，在其style上加入padding:0，此处是为了减小显示/隐藏工具栏所占用的空间。经此修改后的界面为：

注：由于是事后记录，以上的工具栏是重新配置过的~

下一步替换掉原来的默认表情，而使用4ngel精简版中的表情。方法如下：将准备好的QQ表情复制到/editor/images/smiley目录中，这里也可以新建个目录或者复制到其中目录中，最后修改fckconfig.js文件，找FCKConfig.SmileyPath所在行，修改此配置值。比如我是在smiley下新建个qq目录，并将表情拷贝到其中，则对应的配置是：

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/qq/' ;
然后再修改FCKConfig.SmileyImages为

FCKConfig.SmileyImages = ['1.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif',

'2.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif',

'3.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif',

'4.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif',

'5.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif',

'6.gif','60.gif','61.gif','62.gif','63.gif','64.gif','7.gif','8.gif','9.gif'] ;

同时，再修改

FCKConfig.SmileyColumns
FCKConfig.SmileyWindowWidth
FCKConfig.SmileyWindowHeight

的值。至此，表情替换完成。

接下来将fck汉化，找到fckconfig.js中以下两行

FCKConfig.AutoDetectLanguage 
FCKConfig.DefaultLanguage

将其值分别设为false和zh-cn。fckeditor语言文件在editor/lang目录下，可将多余的语言文件删除。

再修改fckeditor的字体列表，可在FCKConfig.FontNames配置项中加入中文常用字体，如“宋体;黑体;隶书;楷体_GB2312”。

最后再按自己所需对工具栏进行配置。至此配置算是完成了。

接下来做的是修改一些上传方面的设置。首先修改的是插入图片中的文件上传功能。按照官方说明，找到fckconfig中的

FCKConfig.ImageUploadURL

配置，此配置定义了图片上传表单的action值，如果不修改此值，则默认由/editor/filemanager/connectors中的相关文件来处理，对于PHP环境，则由php/upload.php来处理。

由于我的项目是基于ThinkPHP编写的，因此此处我将此值设定为：FCKConfig.BasePath+'../../../../../index.php/Public/uploadImage，由PublicAction的uploadImage来处理图片上传。首先需要了解由服务端返回给客户端的消息类型，找到\editor\dialog\fck_image.js文件，在OnUploadCompleted函数中，我们可以看到由服务器返回给客户端的信息类型：

errNumer共有：0，表明上传成功，201表明由于存在同名文件故将上传文件重命名，202表明非法/无效的文件类型，203表明没有上传权限，500表明connector被禁用，另外1为自定义错误，101为自定义警告，其他情况下为在上传过程中发生错误。除errNumber外，服务器还要返回上传后文件的URL，文件名，自定义信息。OnUploadCompleted的声明为：

OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )

完整的服务器输出参见io.php(位于 /editor/filemanager/connectors/php目录中 )，代码如下：

function SendUploadResults( $errorNumber, $fileUrl = '', $fileName = '', $customMsg = '' )
{
	// Minified version of the document.domain automatic fix script (#1919).
	// The original script can be found at _dev/domain_fix_template.js
	echo <<<EOF
<script type="text/javascript">
(function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();
EOF;

	$rpl = array( '\\' => '\\\\', '"' => '\\"' ) ;
	echo 'window.parent.OnUploadCompleted(' . $errorNumber . ',"' . strtr( $fileUrl, $rpl ) . '","' . strtr( $fileName, $rpl ) . '", "' . strtr( $customMsg, $rpl ) . '") ;' ;
	echo '</script>' ;
	exit ;
}

至此，我们可以编写出自己所需upload处理代码了。

//先到这里了...