从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor Ckfinder实现图片上传的功能。

第一:安装配置CKEditor

在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下。

1.  将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/。

第一:安装配置CKEditor ,可改/admin/ckeditor/ckeditor.js来配置编辑器,如字体、背景色、语言

、界面高宽、编辑器按钮分布等

 代码如下 复制代码
config.language = 'en';

config.skin = 'v2';

config.uiColor = '#AADC6E';

config.toolbar = 'Basic';

….

2、官方的demo大多都喜欢用js配置editor区域,习惯写textarea

echo $contentarea;

页面引用CKeditor,关键代码如下

 代码如下 复制代码
复制代码

session_start();

function CheckAuthentication(){

if(isset($_SESSION['UseEidtor']))

return true;

else

return  false;

}

找到”$baseUrl”,这个变量定义了ckfinder文件上传的目录,将值设为”$baseurl=’../data /’,

文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

第三:整合,实现图片上传功能

1.  在编辑器页面头部引用ckfinder.js文件,代码如下:

 代码如下 复制代码

下介绍两调用方法一种php

最后就是使用ckfinder

 代码如下 复制代码

require_once ROOTPATH . "ckeditor/ckeditor.php";

require_once ROOTPATH . 'ckfinder/ckfinder.php' ;

$CKEditor  = new  CKEditor();

$CKEditor->returnOutput = true;

$CKEditor->basePath = '/ckeditor/';

CKFinder::SetupCKEditor($CKEditor, '/ckfinder/') ;//注意这里是相对路径,相对于根目录,

不能用绝对路径

$contentarea =  $CKEditor->editor("content", $rs['contents']);

另一种js或html页面的修改

 代码如下 复制代码

CKEDITOR.replace( 'editor1',

{

filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Images',

filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Files',

filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Images',

filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Flash'

});

这样就大功告成了,有想知道Ckeditor Ckfinder配置图片上传功能支持javascript html和php调用的朋友可以参考一下本教程

本站原创教程转载注明来源:http://www.jquerycn.cn/phper/php.html

ckfinder php 配置,PHP中Ckeditor Ckfinder配置图片上传功能相关推荐

  1. ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程

    从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...

  2. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)--整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

  3. ckeditor java 上传_java使用CKEditor实现图片上传功能

    java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...

  4. java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能

    Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...

  5. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  6. kindeditor java_kindeditor在Java项目中的应用以及图片上传配置

    在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中找到 ...

  7. IDEA中Spring MVC实现图片上传并显示

    我们都知道web项目需要部署到tomcat服务器中运行 那么,我们又是如何通过tomcat来访问存放在本地磁盘中的图片呢?,通过tomcat访问本地图片,需要配置虚拟路径,下面介绍两种配置虚拟路径的方 ...

  8. asp.net core集成CKEditor实现图片上传功能

    背景 本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 1.visual studio 2019 开发环境 2. ...

  9. jsp中简易版本的图片上传程序

    1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO   ...

  10. jeesite4中图片上传功能

    图片上传 一般情况下的图片上传 1.添加图片上传标签 2.修改service中的save方法 将图片保存到实体属性中 1.修改图片上传标签,修改后的如下 效果 将图片保存到对象的拓展表中 1.代码如下 ...

最新文章

  1. python 视频播放界面_PyQt转换显示Python-OpenCV图像实现图形化界面的视频播放
  2. 自动化监控--zabbix中的show value详解
  3. 点滴积累【C#】---操作文件
  4. 语音信号之特性分析图(二)
  5. 新版opencv兼容旧版_【标准换版】关于家用和类似用途电器用外置电源适配器、充电器和内置开关电源产品认证执行新版标准的通知...
  6. hive mysql 字符集_创建Hive表会自动更改mysql Metastore的字符集设置
  7. HTML5: 两个viewport的故事(第一部分)
  8. 01-maven build项目
  9. 怎么让cmd命令行不关闭或查看tomcat启动一闪而过的原因
  10. ASCII码判断大小
  11. SPSS分析技术:神经网络算法;源于人的思维结构的数据分析算法
  12. 使用导入 Excel 的方式批量修改文件夹名称
  13. 华为手机鸿蒙系统手机_华为推出鸿蒙系统2.0 明年华为手机将适配支持
  14. android获取apk名称_apk是什么文件
  15. python改变列的数据类型_更改Pandas中列的数据类型
  16. 日期转换(正推与倒推)
  17. Java中的GC简单介绍
  18. 模板 泛化 全特化 偏特化
  19. BDD100K数据集高速下载地址(百度网盘)
  20. 边看边互动!优酷酷看模式技术揭秘

热门文章

  1. C++语法学习笔记十四:派生类-调用顺序-访问等级-函数遮蔽
  2. 安装CHD走过的一些坑
  3. CHD-5.3.6集群安装
  4. 从互联网大佬到田间养猪,佛系丁磊从未躺平
  5. LDT面试:实验室开发诊断试剂监管模式(Laboratory Developed Test,LDT)
  6. swifty引用AFNetworking出现clang: error: linker command failed with exit code 1 (use -v to see invocation
  7. 面向服务通信与面向信号通信
  8. 离职原因该怎么回答?
  9. 关于Tampermonkey(油猴)的安装和使用的小白教程
  10. maven clean Process terminated