KindEditor在php环境下上传图片功能集成

2023-11-17

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.html

  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/ ,我们可根据自身需要修改目录。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

KindEditor在php环境下上传图片功能集成 的相关文章

  • 【解决】使用IDEA创建springboot项目时,出现错误Cannot download ‘https://start.spring.io‘: connect timed out

    第一步创建项目 create New Project 第二步 错误的意思为 初始化失败 https start spring io 请检查URL 网络和代理设置 错误消息 无法下载 https start spring io 连接超时 解决
  • 西门子S7-1200 PLC选型前这些要了解

    西门子S7 1200PLC是西门子S7系列PLC产品中一员 S7系列产品包含有 S7 200 Smart 200 S7 1200 S7 300 S7 1500 S7 400等系列PLC 其中S7 200 Smart 200 S7 1200系
  • 如何用Stata完成(shui)一篇经济学论文(九):画线性图

    目录 普通线性图 多图并列 一图多线 什么 为什么只讲线形图 因为我只用过线形图 言归正传 我的确只用过线形图 说了跟没说一样 Stata画图给我的感觉一直都是很复杂 很多命令 我觉得好像也没有很多的地方要画图 一般就画个线形图看看趋势 如
  • 数据下载网站整理

    数据十分重要 如何找到理想的数据显得更重要了 这里记录自己经过网上查询到的数据 进行整理 如果侵权 请联系我删除 再次感谢网友大佬们提供的资料 1 中国气象站点数据 下载地址 https www resdc cn data aspx DAT
  • 水文数据产品的网站

    主要记录在平常用到的水文数据产品的网站 包括水库 湖泊 河流等 1 hydroweb 官网 https www theia land fr en hydroweb 界面 下载后的数据是txt格式 如需转成csv 可这样批量操作 import
  • 电源学习总结(六)——BUCK设计

    降压型开关电源 BUCK 是实际应用中较为广泛使用的电路 本文来详细说一说相关的设计细节 这里不考虑集成的开关电源 分控制和驱动 开关管 电感等部分讲 文章目录 基本结构 控制和驱动 开关管 自举电容 电感 电容 工作频率选择 其他注意事项
  • 原理图中的电阻旁边有个”NC“,什么意思?

    NC表示此处空贴 即此处不贴任何电子器件 如果安装的话 电路会有另外的功能 或许在性能上会有变化 常用于电路板贴装技术中 电路板贴装是回流焊中的一种工艺流程 回流焊也叫再流焊 是伴随微型化电子产品的出现而发展起来的焊接技术 主要应用于各类表
  • Inno打包后开始运行前检查文件是否存在

    Code function FileDoesNotExist file string Boolean begin if FileExists file then begin Result False end else begin Resul
  • flink大数据处理流式计算详解

    flink大数据处理 文章目录 flink大数据处理 二 WebUI可视化界面 测试用 三 Flink部署 3 1 JobManager 3 2 TaskManager 3 3 并行度的调整配置 3 4 区分 TaskSolt和parall
  • App\led\led.h(6): warning: #1295-D: Deprecated declaration LED_Init - give arg types

    如图所示操作即可 如图所示操作即可 如图所示操作即可
  • BSD、Apache、MIT、GPL、LGPL几种常见的开源协议

    转载地址 https www cnblogs com Vito2008 p 4806677 html 1 BSD开源协议 original BSD license FreeBSD license Original BSD license B
  • “条件递进式编程”技巧两例

    什么是 条件递进式编程 呵呵 这是我自己起的名字 所谓条件递进式编程 就是指需要一系列相关函数组合执行的情况下 后续函数执行的必要性由前面所有函数执行是否成功来决定 比如说 有一系列函数如下DoSomething1 DoSomething2
  • 第一篇博--初入CSDN

    选择开博并计划按月定期发布一些敲码路上的收获和心得 目的是在梳理知识 复盘总结的同时 能够和志同道合的朋友们一起学习 共同进步 在互联网上留下一份自己的痕迹 与诸君共勉 联系方式 631435743 qq com 欢迎大家找我讨论计算机专业
  • Free C, C++ Compilers(免费的C/C++编译器)

    以下内容来源于 http www programmerworld net resources c compiler htm 1 Free Microsoft eMbedded Visual C Microsoft eMbedded Visu
  • 解决Chrome浏览器左键双击没反应,无法启动

    打开任务管理器Ctrl aLT DEL 或是在任务栏图标空白处右击 解决Chrome浏览器点击没反应 2 然后 在进程列中 点击表头排序 之后找到chrome exe进程 解决Chrome浏览器点击没反应 3 右击选择后 结束进程 解决Ch
  • TRMF 辅助论文:最小二乘法复现TRMF

    1 目标函数 总 论文笔记 Temporal Regularized Matrix Factorization forHigh dimensional Time Series Prediction UQI LIUWJ的博客 CSDN博客 1
  • Freertos 在contexM0芯片上的移植

    1 freertos源码 官网下载地址 https www freertos org 下载LTS长期支持版本 2 在工程目录下新建FreeRTOS文件夹 将FreeRTOS 的源码添加到这个文件夹中 portable 文件夹中只需要复制 k
  • 什么是离岸公司?有什么作用?

    离岸公司是泛指在离岸法区内依据其离岸公司法规范成立的有限责任公司或股份有限公司 这些公司不能在注册地经营 而主要是在离岸法区以外的地方开展业务活动 离岸公司的主要特点包括高度保密性 无外汇管制和减免税务负担 离岸公司的作用主要有以下几个方面
  • LIDAR激光雷达反射板

    LIDAR Light Detection And Ranging 系统是一种集激光 全球定位系统 GPS 和惯性导航系统 INS 三种技术于一身的系统 用于获得点云数据并生成精确的数字化三维模型 LIDAR系统包括一个单束窄带激光器和一个
  • Mac/Linux虚拟机CrossOver2024新版下载使用教程

    CrossOver不像Parallels或VMware的模拟器 而是实实在在Mac OS X系统上运行的一个软件 该软件可以让用户在mac是上直接运行windows软件 本文为大家带来的是CrossOver Mac版安装教程 CrossOv

随机推荐

  • Visio 2013绘制时序图

    为什么要绘制时序图 我们编码的时候 知道有的用例的业务逻辑按照比较确定的时间先后顺序进行展开 这时候 我们就需要知道我们设计的系统中的不同类之间传递消息 可以认为是不同对象函数间的调用 要按照怎么样的顺序 传递什么消息 返回什么消息 这时候
  • Altium designer 原理图转换为pcb时出现的 unknown pin 和 failed to add class member

    网上有很多方法 大部分都是让直接新建一个pcb文件 这显然太不现实了 上述错误可以看出 unknown pin 的错误是在add pin to net的时候发生的 failed to add class member 的错误实在add to
  • 开源库TinyXML2简介及使用

    TinyXML2是一个开源 简单 小巧 高效的C XML解析器 它只有一个 h文件和一个 cpp文件组成 可以轻松集成到其它程序中 它解析XML文档并从中构建可以读取 修改和保存的文档对象模型 Document Object Model D
  • matplotlib绘制折线图

    matplotlib绘制折线图 这阳春三月的邵大白在家过的什么日子 幽栖地僻经过少 花径不曾缘客扫 开个逗b号纪念下这段闭关的时光 万一他以后就变成一个数据分析的大v号了来 好了邵大白课堂开课了 折线图绘制 咱先画个图 载慢悠的加东西 导包
  • Java基础(十三):枚举、注解

    文章目录 一 设置 author标签 二 枚举 enum 一 枚举的两种实现方式 二 enum常用方法 三 注解 一 设置 author标签 设置 author等标签 以后每次创建一个类 自动带着作者信息 二 枚举 enum 枚举表示一组常
  • git提交规范

    1 新功能用add 2 改bug用fix 3 如果使用禅道或者jira 在add或fix后面加上 编号如 add 3563 gt 1 指标名称修改
  • Android Studio解决gradle时下载资源过慢问题

    替换镜像下载方式 打开Android Studio项目中的build gradle文件 找到以下位置 修改jcenter地址为 https maven aliyun com repository jcenter 示例 buildscript
  • 前端实战:小实例5——锚点导航

    前言 锚点定位用于网站某一模块的定位 让用户能够通过锚点直接跳到相应模块 从而实现页面内跳转 常在网页内容较长时使用 多个锚点显示可用一个无序列表显示 利用 ul 和 li 标签 在 li 标签中使用 a 标签实现锚点 对应标签用法可查看
  • Spring Boot + Elasticsearch实现大批量数据集下中文的精确匹配-案例剖析

    缘由 数据存储在MYSQ库中 数据基本维持不变 但数据量又较大 几千万 放在MYSQL中查询效率上较慢 寻求一种简单有效的方式提高查询效率 MYSQL并不擅长大规模数据量下的数据查询 技术方案 考虑后期同样会使用到es 此次直接结合spri
  • Python-修改excel的某一列

    import xlrd 导入模块 from xlutils copy import copy 导入copy模块 rb xlrd open workbook 111 xls formatting info True 打开weng xls文件
  • matlab 点云随机采样到固定点数

    目录 一 采样滤波 1 算法概述 二 代码示例 三 结果展示 一 采样滤波 1 算法概述 给定固定采样点的个数 将点云下采样至给定的点数 二 代码示例 clc clear
  • ElasticSearch6.x 之字段类型

    本文转载至 https blog csdn net chengyuqiang article details 79048800 字段类型概述 字符串类型 1 string string类型在ElasticSearch 旧版本中使用较多 从E
  • 大数据跟区块链之间相互促进关系体现在哪?

    大数据 人工智能和区块链这几个词都是当下非常流行的科技名词 他们不仅拥有各自的特点 还能互相利用跟相互促进 大数据跟人工智能的结合会有什么样的好处 大数据和区块链的结合又能带来什么 今天本文就来跟大家聊聊大数据跟区块链这方面的知识 以供大家
  • HTTP服务器

    HTTP服务器 一 HTTP服务器概述 1 HTTP服务器分类 1 1 JBOSS服务器 1 2 Glassfish服务器 1 3 Weblogic服务器 1 4 Websphere服务器 1 5 Tomcat服务器 1 5 1 Tomca
  • 安装命令 - install

    说明 Linux C C 项目构建过程 有个必要的步骤 install 在Makefile中时常会有一个专门的recipe来做这件事 安装流程需要做以下类型事情 文件的拷贝 最基本 目录结构的创建 程序的strip 文件的属性 权限 owe
  • 将GB2312编码的字符串转换为ISO-8859-1编码的字符串

    例如 String s1 你好 String s2 new String s1 getBytes GB2312 ISO 8859 1
  • PyTorch确保每次复现结果一样

    在代码最前面加入已下代码 torch manual seed seed torch cuda manual seed seed torch cuda manual seed all seed if you are using multi G
  • JAVA中的深情哥-Exception(异常)-上

    文章目录 目录 文章目录 前言 一 Exception的起源 二 异常类 三 自定义异常 总结 前言 大家好 我是最爱吃兽奶 今天给大家介绍一下java中的深情哥 Exception 秋风依依秋水寒 一点离愁两黯然 今生默默唯轻舞 为卿踏破
  • es6查根据对象的某个字段查找到值

    前言 es6查根据对象的某个字段查找到值 实现效果 var 新数组 旧数组 filter item gt item value 0 var arr value 0 label 建筑企业资质 value 1 label 承装 修 试 valu
  • KindEditor在php环境下上传图片功能集成

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