thinkphp下ckeditor+ckfinder的图片上传配置
来源:互联网 发布:淘宝联盟返利在哪查看 编辑:程序博客网 时间:2024/05/16 14:35
开源网页编辑软件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文件夹,包括如下内容:
其中sample为例子,source为源文件,为了减少editor的体积,直接删除。其他你也可删除一些,像语言只留zh-cn。然后将整个文件夹直接拷贝到网站/htdocs/newtp/Public/Js下
在你需要使用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同级。如图:
注意:这里还有些配置必须要做:
把文件夹中的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全部配置完毕,运行效果如下:
补充:要自己配置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(’CKFINDER_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打包下载点击这里
- thinkphp下ckeditor+ckfinder的图片上传配置
- C# ckeditor+ckfinder的图片上传配置
- ckeditor和ckfinder配置上传图片
- Java版的CKEditor + CKFinder图片上传
- ckeditor结合 ckfinder上传图片
- PHP中配置Ckeditor和Ckfinder(实现图片上传)
- ckeditor+图片上传ckfinder调用和简单配置
- 详细配置CKEditor 和 CKFinder 插件上传图片
- PHP 中配置 ckeditor(fckeditor的新版本)+ckfinder ,实现上传图片功能。
- CKfinder CKeditor 上传图片 汉字 乱码 解决方法
- CKEditor和CKFinder 解决图片上传
- ckeditor ckfinder 实现文本编辑和上传图片
- CKEditor和CKFinder实现图片上传
- 使用Ckeditor+Ckfinder完成图片上传
- ckeditor和ckfinder配合使用上传图片
- 关于ckfinder+ckeditor 图片上传路径问题
- CKEditor与CKFinder的配置
- ckeditor+ckfinder中上传文件名的自定义
- 自律、坚持(不犹豫、不动摇)-阿甘!
- 本地编码(GBK,GB2312等)转unicode 再转UTF-8 的C++代码
- MySQL优化经验 key_buffer_size,query_cache_size,table_cache
- Jquery 中如何取的复选框组的值
- ubuntu ssh
- thinkphp下ckeditor+ckfinder的图片上传配置
- json入门
- XP 和2003的Lsass进程中明文密
- ASP.NET MVC使用感言
- USBHID设备报告描述符详解(转帖)
- [悠悠农夫]log分析
- 输出PDF文档到ASP.NET页面
- what is the difference between the setTimeout and setInterval
- windows的一些小技巧