`
moqiang02
  • 浏览: 556401 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

kindEditor完整认识 PHP上调用并上传图片说明

 
阅读更多

最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html感觉有点不太全面细致,所以今天再重新写下。

此文所述KE版本为当前2011年2月3日 20:10:18最新版KindEditor 3.5.2

先看下目录结构

我使用的是PHP 所以黄色区域的文件夹是可以删除的。

重命名为:kindeditor

看下我的WWW目录:

这里的关键文件就是图中的两个 其它我划掉的 是我自己的文件夹

-----------------dome.php----------------------

<?php
 $htmlData = '';
 if (!empty($_POST['content1'])) {
  if (get_magic_quotes_gpc()) {
  echo '上面的';
   $htmlData = stripslashes($_POST['content1']);
  } else {
  echo '下面的';
   $htmlData = $_POST['content1'];   
  }
 }
 
?>
<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>KindEditor PHP</title>
 <link rel="stylesheet" href="./kindeditor/examples/index.css" />   //此处的引入文件位置  路径为相对于该PHP文件的位置  此为demo.php
 <script charset="utf-8" src="./kindeditor/kindeditor.js"></script> //此处的引入文件位置 路径为相对于该PHP文件的位置此为demo.php
 <script>
  KE.show({
   id : 'content1',
   imageUploadJson : '../../php/upload_json.php',   //<<相对于kindeditor3.5.5\plugins\image\image.html 
   fileManagerJson : '../../php/file_manager_json.php',   //<<相对于kindeditor3.5.5\plugins\file_manager\file_manager.html 
   allowFileManager : true,
   afterCreate : function(id) {
    KE.event.ctrl(document, 13, function() {
     KE.util.setData(id);
     document.forms['example'].submit();
    });
    KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
     KE.util.setData(id);
     document.forms['example'].submit();
    });
   }
  });
 </script>
</head>
<body class="ke-content">
 <?php echo $htmlData; ?>
 <form name="example" method="post" action="demo.php">
  <textarea id="content1" name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><?php echo htmlspecialchars($htmlData); ?></textarea>
  <br />
  <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
 </form>
</body>
</html>

注意上面的4处红色文件的位置。

除此以外 还需要修改另两个文件

upload_json.php <<上传图片的使用调用的文件
---------改成---------------

require_once 'JSON.php';

//文件保存目录路径
$save_path = '../attached/';//<<起始路径为upload_json.php所以在目录
//文件保存目录URL
$save_url = '../kindeditor/attached/';//<<起始路径为使用编辑器的文件的路径,此处为demo.php文件。

上面的这句代码可以写成这样 $save_url = 'http://www.xxx.com/kindeditor/attached/'; 这样显示出来的图片,就会带上网站的完整地址

--------upload_json.php 文件修改完毕-------

-------------修改file_manager_json.php文件-----------浏览远程文件时调用

//根目录路径,可以指定绝对路径,比如 /var/www/attached/
$root_path = $php_path . '../attached/';//相对于JSON.php文件的位置。
//根目录URL,可以指定绝对路径,比如http://www.yoursite.com/attached///此处写全URL地址,在输出时并不会把地址输出来,是一个目录指向地址。
$root_url = $php_url . '../attached/';//相对于JSON.php文件的位置。

到此 整个配置就结束了。

yanghbmail 原创 转载请保留出处 谢谢!http://hi.baidu.com/yanghbmail/blog/item/6fc7beec9531e33462d09f2a.html


kindeditor编辑器上传图片报错:服务器发生故障!的解决方法:

在upload_json.php文件的头部加入一行:ini_set('date.timezone','Asia/Shanghai');


分享到:
评论

相关推荐

    KindEditor-4.1.9批量上传图片完整示例(可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能)

    这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...

    KindEditor 4.1.11 完整图片上传 表单提交Demo

    在这个"完整图片上传 表单提交Demo"中,我们主要关注的是如何在Java环境下,特别是在SpringBoot项目中,集成并实现这些功能。 1. **KindEditor简介**: KindEditor是一款基于JavaScript的富文本编辑器,提供了一套...

    kindEditor上传图片到七牛(php版)

    在本文中,我们将深入探讨如何使用KindEditor与七牛云存储进行集成,以便在PHP环境中实现图片上传功能。首先,让我们了解这两个关键组件。 KindEditor是一款功能强大的在线文本编辑器,广泛应用于网页内容编辑和...

    kindeditor图片上传携带token字段

    本文将详细讲解如何在KindEditor中实现图片上传时携带token字段,以确保数据的安全性和完整性。 首先,理解“token”在Web开发中的作用至关重要。Token通常用于验证客户端请求的合法性,防止跨站请求伪造(Cross-...

    优化kindeditor,修改flash批量上传图片方式为H5上传

    “粘贴时自动上传网络图片”是指当用户从剪贴板粘贴包含网络图片的文本时,编辑器会自动抓取这些图片并上传到服务器,然后替换为服务器上的图片链接。这需要监听编辑器的`paste`事件,解析HTML内容中的图片URL,然后...

    kindeditor上传视频、图片功能实现

    通过以上步骤,我们可以构建一个完整的图片和视频上传功能,使用户在使用KindEditor编辑内容时能够方便地添加多媒体资源。注意,实际项目中,还需要考虑性能、扩展性和维护性,以满足不同场景的需求。

    kindEditor+图片批量上传

    "KindEditor图片批量上传工具"是一款专为网页设计者和内容创作者打造的高效图片上传解决方案。这款工具允许用户在Web界面一次性上传多张图片,极大地提升了工作效率,特别是对于那些需要频繁处理文字和图像,比如...

    kindeditor上传图片自动压缩过大的图片

    当用户在编辑器中选择图片并提交上传时,KindEditor会调用预设的上传处理程序,通常是通过一个服务器端脚本,如`upload_json.ashx`。这个脚本负责接收图片数据,验证,处理,然后返回相应的JSON结果给编辑器。 在`...

    kindeditor-4.1.11多图上传按钮无法出现且无法点击flash无法上传

    2. **创建PHP上传处理脚本**:创建一个新的PHP文件,例如`upload.php`,用于接收KindEditor发送的文件。该脚本需要处理文件上传、验证、保存和返回响应。你可以使用PHP的`$_FILES`全局变量来获取上传的文件信息,...

    完整版kindeditor修正上传图片问题

    在"完整版KindEditor修正上传图片问题"这个主题中,我们将探讨如何解决KindEditor在处理图片上传时可能遇到的问题,以及如何配置和定制编辑器以适应不同的后台环境。 首先,KindEditor提供了一个`demo`文件夹,其中...

    kindeditor多图上传H5版

    6. **AJAX**(异步JavaScript和XML):KindEditor的H5版将使用AJAX技术,通过XMLHttpRequest对象进行异步文件上传,使得用户在上传图片时不会刷新整个页面,提供更好的用户体验。 7. **JavaScript事件处理**:在H5...

    kindeditor编辑器,可上传多图片,文件上传等功能

    KindEditor内置了图片和文件上传插件,用户可以直接在编辑器内上传图片或文件,无需离开当前页面。上传过程通常包括选择文件、预览、上传和返回编辑器,这些步骤都是自动化的。上传后的资源可以被嵌入到编辑内容中...

    优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘

    当用户从网页或截图工具中复制图片时,编辑器会自动检测并上传这些图片到服务器,然后插入到内容中,避免了手动下载和上传的繁琐步骤。这利用了HTML5的Clipboard API来读取剪贴板数据,配合File API进行上传。 5. *...

    kindeditor--4.1.12 解决flash批量上传图片按钮不显示与支持video视频

    3. **KindEditor配置问题**:检查KindEditor的配置文件(通常为`config.js`),确保批量上传图片的选项已正确开启。比如,`items`数组中应该包含'uploadimage', 'multiimage'等项。 4. **Flash上传脚本问题**:确认...

    kindeditor上传图片Demo

    1. KindEditor的API使用:如何初始化编辑器,如何设置图片上传的相关参数。 2. AJAX请求与响应处理:理解前后端数据交换的过程。 3. C#服务器端处理文件上传:涉及IIS设置、MVC控制器或WebAPI接口编写。 4. 安全策略...

    vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传

    vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传,避免用户到处寻找,解决了用户粘贴复制截图时候,图片变成base64,上传给后台的时候长度过于长,所以在粘贴的时候就上传给服务器,最后以形式显示在富...

    kindeditor 编辑器php 版 支持附件上传功能!

    kindeditor 编辑器php 版 支持附件上传功能! kindeditor 编辑器php 版 支持附件上传功能!kindeditor 编辑器php 版 支持附件上传功能!kindeditor 编辑器php 版 支持附件上传功能!kindeditor 编辑器php 版 支持...

    kindeditor富文本,多图上传,去除flash插件,解决无法展示选择图片按钮问题,以及添加上传后结果展示

    本主题主要探讨如何在KindEditor中实现多图上传功能,并解决因移除Flash导致的选择图片按钮无法展示的问题,同时添加上传后的图片结果展示。 一、多图上传功能 多图上传是现代富文本编辑器必备的功能之一,它允许...

    KindEditor图片上传相关问题

    本文将深入探讨与KindEditor图片上传相关的问题,并结合提供的`UploadService.java`文件,解析图片上传服务的实现细节。 首先,我们需要了解KindEditor的图片上传流程。当用户在编辑器中选择插入图片时,KindEditor...

Global site tag (gtag.js) - Google Analytics