thinkphp下ckeditor+ckfinder的图片上传配置详解

最新发布的CKFinder 1.4版 已经提供了对CKEditor3.0的支持CKFinder 1.4 下载地址:http://ckfinder.com/CKEditor3.0 下载地址:http://ckeditor.com/
下载后直接解压得到ckeditor文件夹,包括如下内容:

ck配置图片

 

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

ck配置图片

 

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

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

 代码如下 复制代码
<head>   
<script type="text/javascript" src="__PUBLIC__/Js/ckeditor/ckeditor.js"></script>
</head>

在页面相应位置上添加:

 代码如下 复制代码

 <textarea name="editor1"></textarea> 

<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配置图片

 

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

 代码如下 复制代码

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配置图片

 

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

 代码如下 复制代码

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/’);,便于更改路径。

 代码如下 复制代码

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

时间: 2024-10-23 14:18:59

thinkphp下ckeditor+ckfinder的图片上传配置详解的相关文章

CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)

CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还需要下载ckfinder. 首先去官方上下载源代码,然后分别解压缩在网站根目录里(默认ckeditor和ckfinder文件夹里,一般不需要改动) 在所需要的页面插入JS <script type="text/网页特效" src="/ckeditor/ckeditor.JS

Symfony2使用第三方库Upload制作图片上传实例详解_php实例

本文实例分析了Symfony2使用第三方库Upload制作图片上传的方法.分享给大家供大家参考,具体如下: 我们在应用程序或者网站的个人资料里一般都有设置头像的功能,这一章我们在Symfony2里用第三方的一个比较有名Upload库来制作上传图片的功能. 一.安装第三方库 1.在composer.json文件中的"require"中加入 "codeguy/upload": "*" 2.运行指令安装 composer update 二.编码 1.编

php多个文件及图片上传实例详解_php技巧

本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下

php版阿里云OSS图片上传类详解_php技巧

本文实例讲述了php版阿里云OSS图片上传类.分享给大家供大家参考,具体如下: 1.阿里云基本函数 /** * 把本地变量的内容到文件 * 简单上传,上传指定变量的内存值作为object的内容 */ public function putObject($imgPath,$object) { $content = file_get_contents($imgPath); // 把当前文件的内容获取到传入文件中 $options = array(); try { $this->ossClient->

Linux下SSH用FTP命令上传文件详解

如果没有ftp 提示: -bash: ftp: command not found 请先安装ftp应用程序: yum install ftp #ftp 127.0.0.1 21 输入远程空间的FTP IP和端口号,回车 然后根据提示输入用户名和密码即可! ftp>lcd 本地工作目录 ftp>cd 远程目录 ftp>binary 采用二进制传输 ftp> tick 开启传输时的字节计数器,再执行一次即可关闭 ftp>mput 文件 FTP> bye(或by) 结束和远程

上传文件-ckeditor整合ckfinder实现图片上传

问题描述 ckeditor整合ckfinder实现图片上传 这是咋回事??? 解决方案 ckEditor+ckFinder整合实现上传功能黑马程序员_ckeditor+ckfinder实现本地图片上传struts2整合CKEditor和CKFinder实现上传 解决方案二: 你没点击"上传到服务器"这个按钮吧..要先上传才能点击确定

js 百度UEditor图片上传配置及默认使用远程url地址

图片上传配置成功了,图片也上传了,但是有个问题就是图片在保存的时候,使用的是相对地址. 红色部分是现在存在的问题,我想改成下面绿色部分的带有我网站的绝对地址. 在百度搜索了好久,遇到这个问题的不多,但是有个哥们确实也遇到我这个问题,参考: http://blog.csdn.net/javaloverkehui/article/details/8465112 但是他修改的版本属于比较早的版本了.我发现在新版上根本没有这样的配置.或者说配置的地方不一样了. 没办法,我重回百度ueditor的官网,查

java中Struts2文件上传问题详解_java

首先是网页部分,upload_file.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <title>Upload File</title> </head> <body> <form act

CKEditor整合ckfinder实现图片上传

两个东东的下载地址分别为: ckeditor:  http://ckeditor.com/download/ ckfinder:  http://ckfinder.com/download 项目目录结构为:   ckeditor       ---ckeditor       --ckfinder       --test.php 用来测试的PHP文件 2.找到ckfinder目录下的config.php文件打开   1)定位到CheckAuthentication方法,默认此方法只有返回值fa