没问题 / JS / thinkphp下ckeditor+ckfinder的图片上传配...

分享

   

thinkphp下ckeditor+ckfinder的图片上传配置 - 美拓blog

2010-08-11  没问题

开源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor。改进后的ckeditor更加模块话,配置更加灵活,和以前的fckeditor使用方式上也有所不同。在我的mvc项目中由于要用到 ckeditor,特意研究了下它的使用方法,写下来和大家分享。
最新发布的CKFinder 1.4版 已经提供了对CKEditor3.0的支持CKFinder 1.4 下载地址:http://ckfinder.com/CKEditor3.0 下载地址:http://ckeditor.com/
下载后直接解压得到ckeditor文件夹,包括如下内容:

ck配置图片 ck配置图片

 

其中sample为例子,source为源文件,为了减少editor的体积,直接删除。其他你也可删除一些,像语言只留zh-cn。然后将整个文件夹直接拷贝到网站\htdocs\newtp\Public\Js下

ck配置图片 ck配置图片

 

在你需要使用editor控件的页面头部添加:

1 <head>    <script type="text/javascript" src="__PUBLIC__/Js/ckeditor/ckeditor.js"></script></head>

在页面相应位置上添加:

1 <textarea name="editor1"></textarea>
2 <script type="text/javascript">   window.onload = function()  {       CKEDITOR.replace( 'editor1' );  };</script>

注意:js代码一定要写在textarea后,其实可以这样理解editor控件只是对textarea做了一个漂亮的包装,我们的输入其实都在上面的texarea中,最终也是通过textarea提交到服务器端。新的editor中去除了上传功能,也就是说我们不能通过上传插入图片、flash了。如图:editor中的插入图片对话框并没有提供上传功能:

幸好有个插件ckfinder可以辅助我们完成以下功能,插件的下载地址同样在http://ckeditor.com/ 最新版本:ckfinder_aspnet_1.4.1.1解压后,得到一个名为ckfinder的文件夹,同样删除掉source、sample目录(原因同上),拷贝到和ckeditor同级。如图:

ck配置图片 ck配置图片

 

注意:这里还有些配置必须要做:
把文件夹中的bin目录下的dll文件添加到网站的引用中,防止出现找不到类的错误。
打开config.php,修改function CheckAuthentication() { reture false;//改为return true; }此处修改是为了有权限上传。
及上传的目录$baseUrl = ‘/newtp/Public/uploads/’;
接下来就要把ckfinder集成到ckeditor中了,代码如下:

1 var editor = CKEDITOR.replace('editor1'); CKFinder.SetupCKEditor(editor, '/newtp/Public/Js/ckeditor/ckeditor.js');

当然,在页面相应位置引用script代码是必不可少的。 好了,最后一步了,由于ckfinder不是免费的,所以默认情况下会在上传页面中有红色的广告提示,虽然不影响使用,但总是觉得不爽。去除方法如下:找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js,将其中的en.call(window,qo); 代码注释或直接删除。至此我们的ckfinder全部配置完毕,运行效果如下:

ck配置图片 ck配置图片

 

补充:要自己配置eidtor的外观,可打开eidtor文件夹下的:config.js文件进行配置。

1 CKEDITOR.editorConfig = function( config ){    // Define changes to default configuration here. For example:    // config.language = 'fr';    // config.uiColor = '#AADC6E';   // config.width = 200;};

此处配置是针对网站中所有页面的editor,如单个页面需要单独配置,直接在页面中写配置代码,示例如下:CKEDITOR.config.height = 400;

完整的调用如下:
{*FCK_IMAGE_PATH}是在index.php定义的常量为define(’FCK_IMAGE_PATH’, ‘__PUBLIC__/Js/ckfinder/’);,便于更改路径。

01 <script src="__ROOT__/Public/Js/ckeditor/ckeditor.js" type="text/javascript"></script>
02             <script src="__ROOT__/Public/Js/ckfinder/ckfinder.js" type="text/javascript"></script>
03             <script type="text/javascript">
04             if (typeof CKEDITOR == 'undefined') {
05                 document.write('加载CKEditor失败');
06                 }
07                 else {
08                 var editor = CKEDITOR.replace('details');
09                 CKFinder.SetupCKEditor(editor, '{*FCK_IMAGE_PATH}'); //ckfinder总目录的相对路径.
10                 }
11         CKEDITOR.config.width = 710;
12                 CKEDITOR.config.height = 300;
13             </script>


完整ckeditor+ckfinder打包下载点击这里

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    来自: 没问题 > 《JS》

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>