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

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 里面设置,如何设置接下来会有说明。

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

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编辑器上传图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Kindeditor单独调用多图上传实例

    html代码: <input type="button" id="J_selectImage" value="图片上传" /> <div id="J_imageView"> <?php foreach($imgs as $row):?> <div class="img_view"><img class='iYuUpload-View' src='/Upl

  • Kindeditor编辑器添加图片上传水印功能(php代码)

    KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 主要特点: 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内置自定义 DOM 类库,精确操作 DOM 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能 风格:修改编辑器

  • SpringMVC KindEditor在线编辑器之文件上传代码实例

    最近几个项目都要用到在线编辑器,由于之前做在线编辑器都只在php上,对于用java尤其是springmvc框架时,似乎并不如PHP那么简单,搜集了很多博文和资料,全部都不能达到效果,最后在参考各种资料后,自己花时间写了一个上传图片的控制器,亲测保证能用. 1.图片上传控制器 package com.xishan.yueke.view.system; import java.io.File; import java.io.IOException; import java.io.PrintWrite

  • Kindeditor单独调用单图上传增加预览功能的实例

    html代码: <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /&g

  • Kindeditor在线文本编辑器如何过滤HTML

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器. KindEditor使用JavaScript编写,可以无缝的与Java..NET.PHP.ASP等程序接合.这个是官网上的介绍. 主页:http://www.kindsoft.net/index.php 下载:http://www.kindsoft.net/down.php 示例:http://www.kindsoft

  • js控件Kindeditor实现图片自动上传功能

    Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复

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

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

  • Windows环境下安装PHP Pear的方法图文教程

    本文实例讲述了Windows环境下安装PHP Pear的方法.分享给大家供大家参考,具体如下: PEAR简介 PEAR是PHP扩展与应用库(the PHP Extension and Application Repository)的缩写.它是一个PHP扩展及应用的一个代码仓库,简单地说,PEAR之于PHP就像是CPAN(Comprehensive Perl Archive Network)之于Perl. PEAR的基本目标是发展成为PHP扩展和库代码的知识库,而这个项目最有雄心的目标则是试图定义

  • CentOS环境下单独安装apachebench的方法

    本文实例讲述了CentOS环境下单独安装apachebench的方法.分享给大家供大家参考,具体如下: 这两天在测试php性能优化方法. 为了做压力测试可观察效果,就选择了ApacheBench来作为压力测试工具.其实就是大家常说的ab. 但是这个工具是安装apache web server的时候自带的,现在我服务器上都是跑nginx.也不想为了用这个工具就再装个apache.所以在用下面方法单独安装ab工具,这里记录下步骤. 首先安装ab运行需要的软件包apr-util yum install

  • Linux环境下快速搭建ftp服务器方法介绍

    本文研究的主要是Linux环境下快速搭建ftp服务器方法,具体如下.首先看看ftp的介绍: FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件.在FTP的使用当中,用户经常遇到两个概念:"下载"(Download)和"上

  • CentOS服务器环境下MySQL主从同步配置方法

    本文实例讲述了CentOS服务器环境下MySQL主从同步配置方法.分享给大家供大家参考,具体如下: 一.环境 主机: master操作系统:centos 5.3 IP:192.168.1.222 MySQL版本:5.0.77 从机: slave操作系统:centos 5.3 IP:192.168.1.220 MySQL版本:5.0.77 二.创建数据库 分别登录master机和slave机的 mysql:mysql –u root –p 创建数据库: create database repl;

  • CentOS7服务器环境下vsftpd安装及配置方法

    本文实例讲述了CentOS7服务器环境下vsftpd安装及配置方法.分享给大家供大家参考,具体如下: 0x:卸载vsftpd [root@localhost ~]# yum remove vsftpd [root@localhost ~]# find / -name "vsftpd*" /etc/vsftpd /etc/vsftpd/vsftpd.conf.bak [root@localhost ~]# rm -fr /etc/vsftpd/ 1x:重新安装 [root@localho

  • Go语言在Linux环境下输出彩色字符的方法

    Go语言要打印彩色字符与Linux终端输出彩色字符类似,以黑色背景高亮绿色字体为例: fmt.Printf("\n %c[1;40;32m%s%c[0m\n\n", 0x1B, "testPrintColor", 0x1B) 其中0x1B是标记,[开始定义颜色,1代表高亮,40代表黑色背景,32代表绿色前景,0代表恢复默认颜色.显示效果为: 下面代码遍历全部显示效果. package main import ( "fmt" ) func main

  • Linux环境下Oracle安装参数设置方法详解

    前面讲了虚拟机的设置和OracleLinux的安装,接下来我们来说下Oracle安装前的准备工作. 1.系统信息查看 系统信息查看 首先服务器ip:192.168.8.120 服务器系统:Oracle Linux Server release 6.5 服务器主机名:oracle-learn 查看磁盘空间情况: [root@oracle-learn ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda1 32G 4.8G 26G

  • python环境下安装opencv库的方法

    注意:安装opencv之前需要先安装numpy,matplotlib等 一.安装方法 方法一.在线安装 1.先安装opencv-python pip install opencv-python --user 我的python版本是3.6.8,可以看到opencv安装的默认版本是 opencv_python-4.1.0.25-cp36-cp36m-win_amd64.whl 2.再安装opencv-contrib-python pip install opencv-contrib-python -

  • Centos8环境下修改ssh端口号方法

    目录 前言 开始 前言 服务器一般默认的ssh端口号都为22,所以在大部分的使用者手中出于安全考虑就需要修改ssh的默认端口号,下面为为修改ssh默认端口号方法: 此实验是基于我之前将端口号改为2222了,我现在是将其改回22了,所以最后是用端口号22连接到的.不管是修改成别的还是修改回来都是相同的办法. 开始 进入编辑模式: vi etc/ssh/sshd_config 然后按 i 进入插入模式 将光标移动到#Port 20的下面 输入Port 端口号 然后Esc退出插入模式,输入:wq保存退

随机推荐