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画图给我的感觉一直都是很复杂 很多命令 我觉得好像也没有很多的地方要画图 一般就画个线形图看看趋势 如
  • MQTT客户端应用编程及接口分析

    MQTT客户端应用编程及接口分析 MQTT协议简介 MQTT是一个基于客户端 服务器的消息发布 订阅传输协议 MQTT协议是轻量 简单 开放和易于实现的 这些特点使它适用范围非常广泛 客户端服务端安装 1 安装 sudo apt add r
  • VTK环境安装教程

    安装前依赖环境 CMake VS2019 VTK压缩包 8 2 0即可 build过程 第一次分析完 找到下图中选中项 勾选Configure 解释勾选项 BUILD EXAMPLES 生成一些vtk官方的examples 帮助理解学习 当
  • C++ STL概述

    STL就是封装好的一些数据结构以及一些算法 C STL 标准模板库 是一套功能强大的 C 模板类 提供了通用的模板类和函数 这些模板类和函数可以实现多种流行和常用的算法和数据结构 如向量 链表 队列 栈 Standard Template
  • 凛冬已至 冰凌垂挂 岁末年初

    时光荏苒 岁月蹉跎 时间一分一秒从我们身边流过 岁月的脚步声也是越来越小 还没来得及跟眼前的2022挥手道别 2023已经出现在我们的眼前向我们问好 2023 就是新的一年 总会给我们带来无数的幻想和憧憬 虽然现在的我还没有一个真正的新年
  • 缺少msvcp120.dll、msvcr120.dll解决办法

    缺少msvcp120 dll msvcr120 dll解决办法 丢失或缺少msvcp120 dll msvcr120 dll等这些报错是因为我们没有安装vc 运行库 看一下报错对应的数字对应的版本 msvcp msvcr60 71和80 d
  • 第二届网刃杯--部分Re

    1 freestyle ida中分析有个两个fun atoi 将字符转换为整数 得到答案为3327105 MD5加密提交 2 Re function 没有提供密码 但是在右边看到熟悉的89 50 利用winhex保存出来 得到解压密码 解压
  • Ant-Maven-Gradle

    make Makefile学习 peterYong 博客园 ant ant 工具 milkty 博客园 maven 学习Maven这一篇就够了 轻松的小希的博客 CSDN博客 学Maven 这篇万余字的教程 真的够用了 江南一点雨 博客园
  • Blender51个基本操作

    一 选择操作 编辑模式 1 右键 选择 2 A 全选 3 B 左键 矩形选择 4 B 中键点击 矩形移除选择 5 C 左键 圆形选择 6 C 中键点击 圆形移除选择 7 滚轮滑动 圆形选择框大小 8 Ctrl 左键 扇形选择 9 Ctrl
  • DHCP的配置(以华为eNSP为例)

    如有错误 敬请谅解 此文章仅为本人学习笔记 仅供参考 如有冒犯 请联系作者删除 基础知识介绍 络组建步骤 1 拓扑设计 2 IP地址规划 按照拓扑中划分的 络范围 规划 络位不同的IP地址 3 配置 1 配置各个节点的IP地址 2 路由 全
  • 【Android Studio】Design editor is unavailable until next gradle sync.如何解决?

    Design editor is unavailable until next gradle sync 如何解决 打开一个网上开源的下载文件 在查看安卓页面布局 也就是控件布局时 会出现一个bug Design editor is unav
  • FL Studio2024水果编曲软件21.2.0中文版本下载更新

    FL Studio2024是功能强大的音乐制作解决方案 使用旨在为用户提供一个友好完整的音乐创建环境 让您能够轻松创建 管理 编辑 混合具有专业品质的音乐 一切的一切都集中在一个软件中 只要您想 只要您需要 它总能满足您的音乐需求 工具方面
  • 走进暄桐教室 一起观看暄桐同学作品及感受

    暄桐是一间传统美学教育教室 创办于2011年 林曦是创办人和授课老师 教授以书法为主的传统文化和技艺 旨在以书法为起点 亲近中国传统之美 以实践和所得 滋养当下生活 其实 暄桐教室的写字画画课 不仅是林曦老师单方面的输出 而是有分享 也有回
  • FL Studio21.2.2963水果音乐软件安装

    FL Studio是功能强大的音乐制作解决方案 使用旨在为用户提供一个友好完整的音乐创建环境 让您能够轻松创建 管理 编辑 混合具有专业品质的音乐 一切的一切都集中在一个软件中 只要您想 只要您需要 它总能满足您的音乐需求 工具方面 包括强
  • 直排轮滑教程1

    准备活动及站立方法 1 轮滑起源于滑冰 2 开始运动之前最好做热身运动 刺激肌肉 使身体兴奋起来 3 戴护具 顺序是头盔 护肘 护膝 鞋 护掌 脱的顺序相反 4 起身 左腿立起 两手扶腿 两手撑 左腿蹬站立 5 原地站立方法三种 跟靠拢 两
  • 在win10和Linux上配置SSH 无密码登录

    文章目录 一 用途 二 在本地机器上使用ssh keygen产生公钥私钥对 1 在Linux 或macOS 上产生SSH公私钥的方法 2 在win10上产生SSH公私钥的方法 a 检查windows 本地是否安装有ssh b 在本地生成SS
  • Mac/Linux虚拟机CrossOver2024新版下载使用教程

    CrossOver不像Parallels或VMware的模拟器 而是实实在在Mac OS X系统上运行的一个软件 该软件可以让用户在mac是上直接运行windows软件 本文为大家带来的是CrossOver Mac版安装教程 CrossOv
  • chrome浏览器无法在地址栏输入内容搜索问题解决--图文

    关于日常遇到的小问题解决记录一下 1 导航栏录入信息后跳转错误 2 解决办法 默认百度搜索引擎地址错误 百度正确的搜索格式是 http www baidu com s wd s chrome浏览器中百度的搜索格式是 http www bai

随机推荐

  • 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