KindEditor在php环境下上传图片功能集成的方法示例


Posted in PHP onJuly 20, 2020

KindEditor 是一套开源的在线HTML编辑器, 后台可与 Java、.NET、PHP、ASP 等程序集成。为实现图文混排的编辑效果,我们通常都会用到编辑器的图片上传功能,本文会简单讲一下KinEditor的基本使用,主要说明如何在php环境下,集成编辑器的图片上传功能!

  1. KindEditor 官方下载:http://kindeditor.net/down.php
  2. KindEditor 编辑器的基本使用:http://kindeditor.net/docs/usage.html
  3. KindEditor 初始化参数配置:http://kindeditor.net/docs/option.htm
  4. KindEditor 官方案例: http://kindeditor.net/demo.php
  5. KindEditor在php环境下上传图片功能集成

首先,我们先看一下编辑器里面自带的图片上传弹框,编辑器可使用 网络图片 和 本地上传 种方式,如下图。网络图片地址在 file_manager_json.php 里面设置,本地上传的图片上传的文件夹在upload_json.php 里面设置,如何设置接下来会有说明。

KindEditor在php环境下上传图片功能集成的方法示例

KindEditor在php环境下上传图片功能集成的方法示例

下面,我们就开始集成图片上传功能吧。

1)根据上述步骤引入css和js,同时初始化编辑器。

/* 页面已引入以下文件
 *	css: kindeditor/themes/default/default.css
 *	js: kindeditor/kindeditor-all-min.js
 *		 kindeditor/lang/zh-CN.js
 */
 
 // 初始化编辑器
 KindEditor.ready(function(K) {
 editor = K.create('textarea[name="content"]', {
  autoHeightMode : true, // 需自动调整高度时配置
  resizeType: 1, //拖拽设置,详情参考上述第3点,初始化参数配置
  allowImageUpload: true, // 允许图片上传
  allowFileManager: true, // 允许文件管理
  wellFormatMode: false, // 不美化HTML数据,kindeditor会自动美化编辑器的html代码,这样我们输入内容之后生成的html会多很多的<br/>标签,如不需要可将此配置项设置为false.
  uploadJson: 'kindeditor/php/upload_json.php', // 配置文件上传的接口文件的路径,需要使用 本地上传 图片时需配置
  fileManagerJson : 'kindeditor/php/file_manager_json.php', // 配置网络图片加载的接口文件的路径,需要使用 网络图片 加载图片时需配置
  afterCreate : function() {
   this.loadPlugin('autoheight'); // 需自动调整高度时使用
  },
  afterBlur: function(){ // 编辑器失去焦点时将数据同步到textarea
   this.sync(); // sync的详细作用可参考上述第2点,编辑器的基本使用
  }
 });
})

2)修改KindEditor中的 upload_json.php 文件,保证本地上传文件路径的正确性。
在路径 kindeitor/php/ 目录下找到 upload_json.php 文件,我们发现会有下面几行代码:

//文件保存目录路径
$save_path = $php_path . '../attached/';
//文件保存目录URL
$save_url = $php_url . '../attached/';
//定义允许上传的文件扩展名
$ext_arr = array(
	'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
	'flash' => array('swf', 'flv'),
	'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
	'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'),
);

从上面代码可以看出,kindeditor本地上传的图片默认会上传到 kindeditor/attached/ 下面,如果attached目录不存在,则会上传失败。我们可以根据自身代码目录指定本地上传的目录。

3)修改KindEditor中的 file_manager_json.php 文件,保证网络图片路径读取的正确性。
在路径 kindeitor/php/ 目录下找到 file_manager_json.php 文件,我们会发现也有两行与 2)中相似的代码:

//根目录路径,可以指定绝对路径,比如 /var/www/attached/
		$root_path = $php_path . '../attached/';
		//根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
		$root_url = $php_url . '../attached/';
		//图片扩展名
		$ext_arr = array('gif', 'jpg', 'jpeg', 'png', 'bmp');

网路图片地址的默认路径同样是 kindeditor/attached/ ,我们可根据自身需要修改目录。

到此这篇关于PHP环境下如何实现使用KindEditor编辑器上传图片的文章就介绍到这了,更多相关PHP KindEditor编辑器上传图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

PHP 相关文章推荐
ftp类(example.php)
Oct 09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
Nov 19 PHP
PHP 翻页 实例代码
Aug 07 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
Jan 23 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
Aug 31 PHP
php使用curl获取https请求的方法
Feb 11 PHP
laravel学习教程之存取器
Jul 30 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
Mar 28 PHP
php批量修改表结构实例
May 24 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
Aug 27 PHP
使用PHP开发留言板功能
Nov 19 PHP
laravel与thinkphp之间的区别与优缺点
Mar 02 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
Jul 19 #PHP
PHP+MySql实现一个简单的留言板
Jul 19 #PHP
PHP8.0新功能之Match表达式的使用
Jul 19 #PHP
PHP程序守护进程化实现方法详解
Jul 16 #PHP
PHP如何获取Cookie并实现模拟登录
Jul 16 #PHP
PHP使用Http Post请求发送Json对象数据代码解析
Jul 16 #PHP
PHP字符串和十六进制如何实现互相转换
Jul 16 #PHP
You might like
php异常处理使用示例
2014/02/25 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python单链表实现代码实例
2013/11/21 Python
python实现折半查找和归并排序算法
2017/04/14 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python实现月食效果实例代码
2019/06/18 Python
在python中画正态分布图像的实例
2019/07/08 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
大一自我鉴定范文
2013/12/27 职场文书
应届大学生自荐书
2014/06/17 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
工作失职检讨书范文
2015/05/05 职场文书
重阳节简报
2015/07/20 职场文书
党员反邪教心得体会
2016/01/15 职场文书
高中英语教学反思范文
2016/03/02 职场文书