kindEditor完整认识 PHP上调用并上传图片说明
详细介绍如何使用kindEditor编辑器
详细介绍如何使用kindEditor 编辑器今天群里的朋友问我能不能写个kindEditor 编辑器的使用教程，说是弄了半天没有搞定。
由于PHP 啦后台正好用了这个编辑器，我有写经验，正好教他的同时写出来分享给大家kindEditor 编辑器是一个由JS 写成的在线编辑器，很多网站或CMS 等都有用它，口碑不错，目前最新版本是4.1.10。
其实它的用法非常简单，我是在下载了它的安装包后看了一些demo 然后就把它放到PHP 啦的后台上去了。
好了教程正式开始一、下载下载最新版本的kindEditor （官方网站 ），下载后打开examples/index.html 就可以看到一排例子。
二、部署将解压后的文件包kindeditor-4.1.10里的asp jsp php 这几个带有服务端脚本的文件夹删除，然后上传到你网站的相应目录中，在这里我假设放到了plugin 目录。
三、嵌入在需要加入编辑器的页面的HTML 中倒入1 <link rel="stylesheet" href="/plugin/kindeditor-4.1.10/themes/default/default.css" /> 2 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/kindeditor-min.js"></script>3 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/lang/zh_CN.js"></script> 然后添加一个输入框1 <textarea id="editor_id" name="content"></textarea>最后在加入一段JS1 KindEditor.ready(function(K) {2 window.editor = K.create('#editor_id',{3 cssPath:'/public/plugin/editor/plugins/code/prettif y.css',4 uploadJson:'/upload/image.php',5 resizeType :1,6 allowPreviewEmoticons : true,7 allowImageUpload : true,8 });9 });好了。
kindeditor用法
kindeditor用法详解
kindeditor是一个基于JavaScript的富文本编辑器，它具有简单易用、功能强大、兼容性好等特点。
下面是对kindeditor用法的一些详细解释。
一、引入kindeditor
在使用kindeditor之前，需要先引入kindeditor的库文件。
可以通过下载kindeditor的压缩包，或者通过CDN引入kindeditor。
例如，通过CDN引入kindeditor的代码如下：
二、创建kindeditor编辑器
在HTML中创建一个textarea元素，并为其指定一个id或class，然后通过JavaScript代码将其转换为kindeditor编辑器。
例如，将id为"editor"的textarea元素转换为kindeditor编辑器的代码如下：
三、使用kindeditor编辑器
使用kindeditor编辑器非常简单，可以通过调用editor对象的方法来执行各种操作。
以下是一些常用的方法：
1.获取编辑器内容：
2.设置编辑器内容：
3.插入图片：
4.插入链接：
5.获取焦点：
6.执行其他操作：
kindeditor还提供了许多其他方法，例如删除选中内容、查找和替换文本、设置样式等。
可以参考kindeditor的官方文档或示例代码来了解更多用法。
两种php实现图片上传的方法
两种php实现图⽚上传的⽅法图⽚上传在项⽬中经常⽤到，⼏乎没有任何⼀个项⽬可以脱离图⽚或者是⽂件上传。
本篇我在这向⼤家介绍两种常规的上传⽅式。
（注：在这⾥我们仅仅是对功能的实现，不去做过多的前端的样式）⼀、利⽤form表单上传此种⽅式是最原始的上传⽅式，前端就是简单的form表单，后端我们有PHP处理传输过来的⽂件。
⾸先看前端的代码 upload.html<form action="handle.php" name="form" method="post" enctype="multipart/form-data"><input type="file" name="file" /><input type="submit" name="submit" value="上传" /></form>然后新建php⽂件 handle.php 代码如下$file = $_FILES['file'];//得到传输的数据//得到⽂件名称$name = $file['name'];$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到⽂件类型，并且都转化成⼩写$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型//判断⽂件类型是否被允许上传if(!in_array($type, $allow_type)){//如果不被允许，则直接停⽌程序运⾏return ;}//判断是否是通过HTTP POST上传的if(!is_uploaded_file($file['tmp_name'])){//如果不是通过HTTP POST上传的return ;}$upload_path = "D:/now/"; //上传⽂件的存放路径//开始移动⽂件到相应的⽂件夹if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){echo "Successfully!";}else{echo "Failed!";}当然，此php处理代码不是很完善，其中对错误的情况没有进⾏处理，然⽽使⽤php处理上传⽂件的原理就是这样的，⼤家可以在此基础上进⾏优化，使其更加完善。
KindEditor使用说明书
编辑器使用方法1. 下载编辑器下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。
下载页面: /down.php2. 部署编辑器解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/Note您可以根据需求删除以下目录后上传到服务器。
∙asp - ASP程序∙ - 程序∙php - PHP程序∙jsp - JSP程序∙examples - 演示文件3. 修改HTML页面1.在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content"style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>Note∙id在当前页面必须是唯一的值。
∙在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、等)直接显示内容，则必须转换HTML 特殊字符(>,<,&,”)。
具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、 、PHP、JSP。
∙在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。
宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。
2.在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script><script charset="utf-8" src="/editor/lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K) {editor = K.create('#editor_id');});</script>Note∙第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
KindEditor3.5.2最新ASP、PHP版分享及使用方法
KindEditor3.5.2最新ASP/PHP版分享及使用方法最近做web网站在找编辑器的时候在选择编辑器，分别测试了fckeditor和kindeditor这两款，下面做一个简单的说明：[1].fckeditor编辑器对于从word复制过来的格式会乱掉，另外考虑其自身的安全问题，就没用它了[2].kindeditor则是js+html的编辑器，当然另外如果你加入图片上传功能就要提供php或asp的脚本[3].比较遗憾的是kindeditor只能传图片，其他附件无法上传，不过如果加入这个功能也不难，可以参考image上传来编写因此本次的重点就是讲解kindeditor的使用，刚好这次同时使用了asp和php编写，因此两个都会分享。
<!--more-->1.ASP版KindEditor3.5.2使用方法及常见问题使用的时候可以参考原版里面的asp/demo.asp来操作，这里要重点说明是关于调用编辑器代码：[javascript]<script type="text/javascript" charset="utf-8" src="../keditor/kindeditor.js"></script> <script type="text/javascript">KE.show({id : 'content',// 这个是相对于/plugins/image目录而言，一般保持默认即可imageUploadJson : '../../asp/upload_json.asp',fileManagerJson : '../../asp/file_manager_json.asp',// 同上allowFileManager : true,afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});}});</script>[/javascript]在asp要调用编辑器比较常见问题是图片上传问题，我说下我这个编辑器的配置目录问题(1).编辑器在根目录，而我调用编辑器是后台文章编辑，如下方式：|--keditor # 放在根目录防止爆后台路径|--admin/newedit.asp|--upload #上传目录放在根目录防止暴露后台地址(2).在asp的2个上传文件keditor\asp\file_manager_json.asp # 图片浏览在该文件中，涉及到上传目录的设置问题，代码如下：[vb]rootPath = "/upload/"rootUrl = "../upload/"[/vb]keditor\asp\upload_json.asp # 图片上传在该文件中，涉及到上传目录的设置问题，代码如下：[vb]'文件保存目录路径savePath = "/upload/"'文件保存目录URLsaveUrl = "../upload/"[/vb](3)同时在编辑器中加入插入代码的功能，具体不详说，查看附件代码这样子设置完目录的结构就不会出现"服务器出现故障"的提示，出现这个提示一般可能有以下几种情况：(1).上传目录设置问题(2).从官方下载的版本默认是utf-8格式，如果用到gbk中可能会出现这个错误提示(3).程序本身出错（没有修改程序是不会这个问题！）<a href='/wp-content/uploads/2011/03/keditor.zip'>点我下载:keditor 3.5.2 for asp Modify by 冷锋</a>2.PHP版KindEditor3.5.2使用方法及常见问题PHP版的和ASP原理差不多就是在目录设置有点不一样，注意下就可以了，就不多说，只说下目录结构：|--keditor # 更目录|--keditor/attached # 上传目录|--system/newedit.php # 调用编辑器页面目录在后台目录设置常见keditor/php目录下两个php文件，建议不要调整目录结构。
KindEditor使用手册
KindEditor使用手册一简单使用方法1.把所有文件上传到程序所在目录下，例如：http://你的域名/editor/。
2.在此目录下创建attached文件夹，并把权限改成777。
3.要添加编辑器的地方加入以下代码。
（原来的TEXTAREA或其它编辑器可以先注释。
）这里[]里的内容要根据你的实际情况修改。
-----------------------------------------------------------------------<input type="hidden" name="[原TEXTAREA名字]" value="[这里放你要编辑的内容]"><script type="text/javascript" charset="utf-8"src="[JS路径]/KindEditor.js"></script><script type="text/javascript">var editor = new KindEditor("editor"); //创建编辑器对象editor.hiddenName = "[原TEXTAREA名字]"; editor.editorWidth = "[编辑器宽度,例如：700px]"; editor.editorHeight = "[编辑器高度,例如：400px]"; editor.show(); //显示//提交时获得最终HTML代码的函数function KindSubmit() {editor.data();}</script>----------------------------------------------------------------------- 4.FORM的onsubmit属性里添加KindSubmit()函数。
PHP富文本编辑器之Kindeditor的使用一
PHP富⽂本编辑器之Kindeditor的使⽤⼀⼀、下载编辑器源码[1143KB]⼆、部署编辑器将下载⽂件解压⽬录结构如下三、修改HTML页⾯1、在需要显⽰编辑器的位置添加textarea输⼊框<textarea id="editor_id" name="content" style="width:700px;height:300px;"> 这⾥输⼊内容...</textarea>2、在该HTML页⾯添加以下脚本<script src="../kindeditor-4.1.10/kindeditor.js"></script><script src="../kindeditor-4.1.10/lang/zh_CN.js"></script><script>KindEditor.ready(function(K){window.editor = K.create('#editor_id');});</script>完整代码如下<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script src="../kindeditor-4.1.10/kindeditor.js"></script><script src="../kindeditor-4.1.10/lang/zh_CN.js"></script><script>KindEditor.ready(function(K){window.editor = K.create('#editor_id');});</script><form method="POST" action="get_form.php"><textarea id="editor_id" name="content" sytle="width:700px;height=300px"></textarea><input type="submit" name="button" value="提交"></form>效果如图：。
kindEditor4.1版修改上传图片宽高(图片自适应)
KindEditor 4.1上传图片宽高设置需求：需要将图片设置为自适应，让该图片在任何尺寸的页面中都能正常显示不拉伸，也就是平时使用的给宽度设置百分比，因此需要修改源码。
在网上看了很多文档，有人说要遍历得到的编辑器的内容，找到<img>标签，获取该图片的原始宽高，然后进行修改，我个人表示没有看懂，不清楚怎么实现的。
还有人说要修改kindEditor.js中第3168行附近，在下面代码：var html = '<img src="'+_escape(url)+'" data-ke-src="' + _escape(url) + '" '; 中添加width="'+width+'" height="'+height+'"，我也试了一下，不可用，经过半天时间的研究，基本上实现了图片自适应的效果，下面来分析一下kindEditor中图片部分的源码。
图片中图片相关的源码都封装在plugins/image/image.js中，该文件中主要包括了上传图片的界面，和后台处理，其他不多说，说一下图片上传之后路过的代码部分self.plugin.imageDialog({imageUrl : img ? img.attr('data-ke-src') : 'http://',imageWidth : img ? img.width() : '',imageHeight : img ? img.height() : '',imageTitle : img ? img.attr('title') : '',imageAlign : img ? img.attr('align') : '',showRemote : allowImageRemote,showLocal : allowImageUpload,tabIndex: img ? 0 : imageTabIndex,clickFn : function(url, title, width, height, border, align) { if (img) {img.attr('src', url);img.attr('data-ke-src', url);img.attr('width', width);img.attr('height', height);img.attr('title', title);img.attr('align', align);img.attr('alt', title);} else {self.exec('insertimage', url, title, width, height, border, align);}setTimeout(function() {self.hideDialog().focus();}, 0);}});},上面这段代码，在执行时，第一次上传的图片，获取不到宽和高，也就是clickFn : function(url, title, width, height, border, align) {这一行中width和height都是空值，图片上传后，右键点击图片属性，设置图片宽高，之后可以把宽和高加到HTML代码中，if (img)为图片获取到宽和高的时候，进入，获取不到的时候进入else。
php图片上传类 附调用方法
本文实例为大家分享php图片上传类，供大家参考，具体内容如下调用方法：<?phpheader("Content-Type:text/html; charset=utf-8"); //类的实例化：include("uppoo.php");//类的文件名是upoop.php$up=newupphoto;$submit=$_POST['submit'];if($submit=="上传"){$up->get_ph_tmpname($_FILES['photo']['tmp_name']);$up->get_ph_type($_FILES['photo']['type']);$up->get_ph_size($_FILES['photo']['size']);$up->get_ph_name($_FILES['photo']['name']);$up->save();}?>//上传图片的HTML：<form action="upphoto.php?action=act" method="post" enctype="multipart/form-data">图片来源：<input type="file" name="photo"><input type="submit" name="submit" value="上传"> 上传类，保存文件名称为uppoo.php：<?phpclass upphoto{public $previewsize=0.125 ; //预览图片比例public $preview=0; //是否生成预览，是为1，否为0 public $datetime; //随机数 public $ph_name; //上传图片文件名 public $ph_tmp_name; //图片临时文件名 public $ph_path="./userimg/"; //上传文件存放路径public $ph_type; //图片类型 public $ph_size; //图片大小 public $imgsize; //上传图片尺寸，用于判断显示比例 public $al_ph_type=array('image/jpg','image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','ima ge/x-png'); //允许上传图片类型 public $al_ph_size=1000000; //允许上传文件大小 function __construct(){ $this->set_datatime(); } function set_datatime(){ $this->datetime=date("YmdHis"); } //获取文件类型 function get_ph_type($phtype){ $this->ph_type=$phtype; } //获取文件大小 function get_ph_size($phsize){ $this->ph_size=$phsize."<br>"; } //获取上传临时文件名 function get_ph_tmpname($tmp_name){ $this->ph_tmp_name=$tmp_name; $this->imgsize=getimagesize($tmp_name); } //获取原文件名 function get_ph_name($phname){ $this->ph_name=$this->ph_path.$this->datetime.strrchr($phname,"."); //strrchr获取文件的点最后一次出现的位置//$this->ph_name=$this->datetime.strrchr($phname,"."); //strrchr获取文件的点最后一次出现的位置return $this->ph_name; }// 判断上传文件存放目录 function check_path(){ if(!file_exists($this->ph_path)){ mkdir($this->ph_path); } } //判断上传文件是否超过允许大小 function check_size(){ if($this->ph_size>$this->al_ph_size){ $this->showerror("上传图片超过2000KB"); } } //判断文件类型 function check_type(){ if(!in_array($this->ph_type,$this->al_ph_type)){ $this->showerror("上传图片类型错误"); } } //上传图片 function up_photo(){ if(!move_uploaded_file($this->ph_tmp_name,$this->ph_name)){ $this->showerror("上传文件出错"); } } //图片预览 function showphoto(){ if($this->preview==1){ if($this->imgsize[0]>2000){ $this->imgsize[0]=$this->imgsize[0]*$this->previewsize; $this->imgsize[1]=$this->imgsize[1]*$this->previewsize; } echo("<img src=\"{$this->ph_name}\" width=\"{$this->imgsize['0']}\" height=\"{$this->imgsize['1']}\">"); } } //错误提示 function showerror($errorstr){ echo "<script language=java script>alert('$errorstr');location='java script:history.go(-1);';</script>"; exit(); } function save(){ $this->check_path(); $this->check_size(); $this->check_type(); $this->up_photo(); $this->showphoto(); }}?>以上就是本文的全部内容，希望对大家学习php程序设计有所帮助。
php多图片上传的简单例子
php多图片上传的简单例子php多图片上传的简单例子php 多图片上传的简单例子，只为初学的朋友参考，就跟随店铺一起去了解下吧，想了解更多相关信息请持续关注我们店铺!1、图片上传前台页面 upload.html注意input type=file 和enctype="multipart/form-data"，这是php文件上传的关键。
a href=/wb/php/ target=_blank class=infotextkeyphp/a 多图片上传的前台页面2、处理多文件上传的程序 do_upload.phpphp 多图片上传的程序代码以下演示具体的上传过程：step1：上传图片step2：上传图片步骤二上传图片步骤三：上传图片成功在实际的测试过程中，提示所以图片上传失败，登录linux服务器，对files目录赋予可写入的权限即可。
如下图所示：给目录赋权限附：有关php的$_FILES数组$_FILES数组内容如下:$_FILES['myFile']['name'] 客户端文件的`原名称。
$_FILES['myFile']['type'] 文件的MIME 类型，需要浏览器提供该信息的支持，例如"image/gif"。
$_FILES['myFile']['size'] 已上传文件的大小，单位为字节。
$_FILES['myFile']['tmp_name'] 文件被上传后在服务端储存的临时文件名，一般是系统默认。
可以在php.ini的upload_tmp_dir 指定，但用 putenv() 函数设置是不起作用的。
$_FILES['myFile']['error'] 和该文件上传相关的错误代码。
['error'] 是在PHP 4.2.0 版本中增加的。
php图片上传
php图片上传,可实现预览php教程图片上传,可实现预览<?phpheader("content-Type: text/html; charset=gb2312");$uptypes=array('image/jpg', //上传文件类型列表'image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','application/x-shockwave-flash','image/x-png','application/msword','audio/x-ms-wma','audio/mp3','application/vnd.rn-realmedia','application/x-zip-compressed','application/octet-stream');$max_file_size=10000000; //上传文件大小限制, 单位BYTE$path_parts=pathinfo($_SERVER['PHP_SELF']); //取得当前路径$destination_folder="up/"; //上传文件路径$watermark=0; //是否附加水印(1为加水印,0为不加水印);$watertype=1; //水印类型(1为文字,2为图片)$waterposition=2; //水印位置(1为左下角,2为右下角,3为左上角,4为右上角,5为居中); $waterstring=""; //水印字符串$waterimg="xplore.gif"; //水印图片$imgpreview=1; //是否生成预览图(1为生成,0为不生成);$imgpreviewsize=1/1; //缩略图比例?><html xmlns="undefined"><head><title>图片上传储存</title><style type="text/css教程">body,td{font-family:tahoma,verdana,arial;font-size:11px;line-height:15px;background-color:white ;color:#666666;strong{font-size:12px;}a:link{color:#0066CC;}a:hover{color:#FF6600;}a:visited{color:#003366;}a:active{color:#9DCC00;}a{TEXT-DECORA TION:none}td.irows{height:20px;background:url("index.php?i=dots") repeat-x bottom}</style></head><script type="text/网页特效">function oCopy(obj){obj.select();js=obj.createTextRange();js.execCommand("Copy");};functionsendtof(url){window.clipboardData.setData('Text',url);alert('复制地址成功，粘贴给你好友一起分享。
kindEditor完整认识 PHP上调用并上传图片说明
引用:/yanghbmail/blog/item/6fc7beec9531e33462d09f2a.htm lkindEditor完整认识 PHP上调用并上传图片说明。
2011年02月03日星期四 20:26最近又重新捣鼓了下kindeditor，之前写的一篇文章/yanghbmail/blog/item/c681be015755160b1d9583e7.htm l感觉有点不太全面细致，所以今天再重新写下。
此文所述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.htmlfileManagerJson : '../../php/file_manager_json.php', //<<相对于kindeditor3.5.5\plugins\file_manager\file_manager.htmlallowFileManager : 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处红色文件的位置。
简单PHP上传图片的方法
简单PHP上传图片的方法简单PHP上传图片的方法PHP上传图片、删除图片实现代码，需要的朋友可以参考下。
就跟随店铺一起去了解下吧，想了解更多相关信息请持续关注我们店铺!上传图片：复制代码代码如下:if (!empty($_FILES["img"]["name"])) { //提取文件域内容名称，并判断$path=”uppic/”; //上传路径if(!file_exists($path)){//检查是否有该文件夹，如果没有就创建，并给予最高权限mkdir(“$path”, 0700);}//END IF//允许上传的文件格式$tp = array(“image/gif”,”image/pjpeg”,”image/jpeg”);//检查上传文件是否在允许上传的类型if(!in_array($_FILES["img"]["type"],$tp)){echo “<script>alert(‘格式不对');history.go(-1);</script>”;exit;}//END IF$filetype = $_FILES['img']['type'];if($filetype == ‘image/jpeg'){$type = ‘.jpg';}if ($filetype == ‘image/jpg') {$type = ‘.jpg';}if ($filetype == ‘image/pjpeg') {$type = ‘.jpg';}if($filetype == ‘image/gif'){$type = ‘.gif';}if($_FILES["img"]["name"]){$today=date(“YmdHis”); //获取时间并赋值给变量$file2 = $path.$today.$type; //图片的完整路径$img = $today.$type; //图片名称$flag=1;}//END IFif($flag)$result=move_uploaded_file($_FILES["img"]["tmp_name"],$file2);//特别注意这里传递给move_uploaded_file的第一个参数为上传到服务器上的临时文件}//END IF//这里再将$img的`值写入到数据库中对应的字段删除图片：复制代码代码如下:unlink(“uppic/”.$img); //当然，变量的值是从数据库中读取出来的，PHP删除图片比ASP简洁多了。
PHP实现图片（文件）上传
PHP实现图⽚（⽂件）上传这⼏天整理做过的php项⽬，感觉这个经常会⽤到，传上来共享⼀下咯⾸先，前端界⾯1、表单的⾸⾏需要加上enctype="multipart/form-data"，需要上传的图⽚必须设置 type="file"表⽰选择⽂件<form id="img_form" method="post" class="form-horizontal" role="form" enctype="multipart/form-data"><label class="col-sm-3 control-label" for="image">图⽚：</label><div class="col-sm-9 require"><input type="hidden" name="MAX_FILE_SIZE" value="2000000">//⽂件最⼤尺⼨<input type="file" class="form-control" name="image" id="image"></div></div></form>2、为表单添加事件，我⽤的是ajax因为图⽚在是⼆进制传输，所以需要⽤new FormData(this）获取表单⾮⽂本类的数据（注包括⽂本类），纯⽂本类数据可⽤$(this).serialize()；$('#form1').submit(function (e) {e.preventDefault();var data=new FormData(this);//获取⾮⽂本类的数据$.ajax({url:"php/add.php",//处理页⾯的路径data:data,//通过json格式将⼀组数据传过去type:"post",//数据的提交和传递⽅式，最好⽤POSTdataType:"json",//页⾯返回值的类型，共有三种：TEXT,JSON,XML可选cache:false,contentType:false,processData:false,success:function(res){//回调函数：如果ajax调⽤成功，就执⾏这个success后⾯的函数，(data)当做参数返回过来if (res.flag===1){alert('上传成功！');} else if(res.flag===2){alert('⽹络或其他未知错误，请重试！')}else{alert('图⽚格式错误，请重试！')}},error: function () {alert("error")}});});3、编写php⽂件connect.php数据库连接⽂件<?php$link=new PDO("mysql:host=localhost;port=3306;dbname=db","root","");$link->query("set names utf8");add.phpextract($_POST)：批量获取前端post⽅式传过来的数据，使⽤参数时参数名为前端传过来的初始名。
关于Kindeditor编辑器上传图片文件的几个问题汇总(asp)
技术积累 - 关于Kindeditor编辑器上传图片文件的几个问题汇总(asp)[摘要]：我想做网站开发的程序员们对Kindeditor编辑器并不陌生的吧，它是一款非常强大的编辑器，轻量级的。
结合纯jQuery+CSS写成的，部署环境起来非常的简单方面快捷。
在Kindeditor的官方网站上面供下载的Demo，不过里头默认的都是php方面的demo。
那么asp的大神些如何能够实用在自己的网站项目中去呢？我们需要做如下几点。
1、设置负责文件上传asp文件的路径设置这个路径值我们可以设置两个地方：1）、/kindeditor/plugins/images/image.js内的第15行，修改为如下图中所示2）、修改kindeditor所嵌入的页面，写上上传文件asp的地址，最好写相对路径，不要使用.../这样的形式2...我想做网站开发的程序员们对Kindeditor编辑器并不陌生的吧，它是一款非常强大的编辑器，轻量级的。
结合纯jQuery+CSS写成的，部署环境起来非常的简单方面快捷。
在Kindeditor的官方网站上面供下载的Demo，不过里头默认的都是php 方面的demo。
那么asp的大神些如何能够实用在自己的网站项目中去呢？我们需要做如下几点。
1、设置负责文件上传asp文件的路径设置这个路径值我们可以设置两个地方：1）、/kindeditor/plugins/images/image.js内的第15行，修改为如下图中所示2）、修改kindeditor所嵌入的页面，写上上传文件asp的地址，最好写相对路径，不要使用.../这样的形式2、修改upload_json.asp文件'上传成功返回true，否则返回falseresult = file.saveToFile(savePath, 0, true)if result = false thenresponse.Write("")response.Endend if3、修改Upload_Class.asp文件修改Upload_Class.asp内的saveToFile函数内的518行和520行如下If Not Err ThenSaveToFile = trueElseSaveToFile = falsemException=Err.DescriptionEnd If。
kindeditor的使用
kindeditor的使用一、KindEditor介绍KindEditor是一款开源的web编辑器，由Javascript开发而成。
它支持网页编辑、图片上传和flash播放，也支持表情符号等特殊功能，使用起来非常方便，大大提高了文章的编辑效率。
二、KindEditor的功能1、支持多种文件上传格式：支持jpg、jpeg、png、gif、bmp等多种格式的图片上传，也支持doc、txt、xls等office文档的上传；2、支持Flash播放：支持swf格式的flash文件的播放，可以将flash文件插入到文章中；3、支持表情：支持表情符号的插入；4、支持滚动条：可以自定义滚动条的样式和速度；5、支持插入文件：可以插入html、css 、js等文件。
三、KindEditor的使用1、下载并解压KindEditor压缩包，在页面中引入kindeditor.js 文件；2、在需要使用KindEditor的地方插入一个<textarea>标签；3、实例化KindEditor：//实例化编辑器var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name='content']', {tresizeType : 1,tallowPreviewEmoticons : false,tallowImageUpload : false,titems : [tt'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',tt'removeformat', '|', 'justifyleft', 'justifycenter','justifyright', 'insertorderedlist',tt'insertunorderedlist', '|', 'emoticons', 'image','link']});});4、提交表单：当提交表单时，调用 KindEditor.sync() 将编辑器中的内容同步到 textarea 中。
使用富文本编辑器上传图片实例详解
使⽤富⽂本编辑器上传图⽚实例详解富⽂本编辑器上传图⽚⼀、导⼊kindeditor的js<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script><script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>⼆、将kindeditor与⼀个⽂本域textarea进⾏关联，即⽤textarea初始化⼀个kindeditor对象itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");//初始化类⽬选择和图⽚上传器TAOTAO.init({fun:function(node){TAOTAO.changeItemParam(node, "itemAddForm");}});三、设置要上传的参数var TT = TAOTAO = {// 编辑器参数kingEditorParams : {//指定上传⽂件参数名称filePostName : "uploadFile",//指定上传⽂件请求的url。
uploadJson : '/pic/upload',//上传类型，分别为image、flash、media、filedir : "image"},init : function(data){// 初始化图⽚上传组件this.initPicUpload(data);// 初始化选择类⽬组件this.initItemCat(data);},// 初始化图⽚上传组件initPicUpload : function(data){$(".picFileUpload").each(function(i,e){var _ele = $(e);_ele.siblings("div.pics").remove();_ele.after('\<div class="pics">\<ul></ul>\</div>');// 回显图⽚if(data && data.pics){var imgs = data.pics.split(",");for(var i in imgs){if($.trim(imgs[i]).length > 0){_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>"); }}}//给“上传图⽚按钮”绑定click事件$(e).click(function(){var form = $(this).parentsUntil("form").parent("form");//打开图⽚上传窗⼝KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){var editor = this;editor.plugin.multiImageDialog({clickFn : function(urlList) {var imgArray = [];KindEditor.each(urlList, function(i, data) {imgArray.push(data.url);form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");});form.find("[name=image]").val(imgArray.join(","));editor.hideDialog();}});});});});服务端代码public Map uploadPicture(MultipartFile uploadFile) {Map resultMap=new HashMap<>();try {//⽣成⼀个新的⽂件名//去原始⽂件名String oldName=uploadFile.getOriginalFilename();//⽣成新的⽂件名//UUID.randomUUID();String newName=IDUtils.genImageName();newName=newName+oldName.substring(stIndexOf("."));String imagePath=new DateTime().toString("/yyyy/MM/dd");//上传图⽚boolean result=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH,imagePath, newName, uploadFile.getInputStream());System.out.println("result="+result);if(!result){resultMap.put("error", 1);resultMap.put("message", "⽂件上传失败");System.out.println("hh");return resultMap;}resultMap.put("error", 0);resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);return resultMap;} catch (IOException e) {resultMap.put("error", 1);resultMap.put("message", "⽂件上传异常");return resultMap;}}注意：服务端返回的json串的格式{error: 0|1,message|url} 其中error为整型不为字符串，如果写成字符串图⽚能够正常上传⾄服务器，但是不能在浏览器中回显。
kindeditor上传文件
kindeditor上传文件引用js文件:<link rel="stylesheet" href="plugins/kindeditor/themes/default/default.css" /> <script charset="utf-8" src="plugins/kindeditor/kindeditor-min.js"></script> <script charset="utf-8" src="plugins/kindeditor/lang/zh_CN.js"></script> KindEditor.ready(function(K) {//初始化编辑器var editor1 = K.create('.editor', {cssPath : '/plugins/kindeditor/plugins/code/prettify.css',uploadJson : '/plugins/kindeditor/php/upload_json.php',fileManagerJson : '/plugins/kindeditor/php/file_manager_json.php',allowFileManager : true,afterCreate : function() {}});prettyPrint();});/*$(function() {var editor = KindEditor.create('textarea[name="content"]');});*///单图上传KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#image1').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({imageUrl : K('#url1').val(),clickFn : function(url, title, width, height, border, align) {K('#url1').val(url);editor.hideDialog();}});});});});KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#image2').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({imageUrl : K('#url2').val(),clickFn : function(url, title, width, height, border, align) {K('#url2').val(url);editor.hideDialog();}});});});});//批量上传图片KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#J_selectImage').click(function() {editor.loadPlugin('multiimage', function() {editor.plugin.multiImageDialog({clickFn : function(urlList) {var div = K('#J_imageView');div.html('');K.each(urlList, function(i, data) {div.append('<img src="' + data.url + '">');});editor.hideDialog();}});});});});html:<p>PC端图片：<input readonly name="pic" type="text" id="url1" value="{twotree#$info.pic}" class="text-input small-input"/><input type="button" id="image1" value="选择图片" class="button"/><font style="color:red"> 【图片大小不能超过1M】</font></p><p>手机端图片：<input readonly name="pic1" type="text" id="url2" value="{twotree#$info.pic1}" class="text-input small-input"/><input type="button" id="image2" value="选择图片" class="button"/><font style="color:red"> 【图片大小不能超过1M】</font></p>。
TinyMCE汉化及本地上传图片功能实例详解
TinyMCE汉化及本地上传图⽚功能实例详解下载下来是英⽂版，要汉化也很简单。
⾸先去⽹上随便下载个汉化包，然后把汉化包解压后的langs⽂件夹⾥的zh_CN.js拷到你下载的TinyMCE的langs⽂件夹中就⾏。
最后在 tinymce.init中加上”language: "zh_CN"，"（后⾯会贴出代码）本地图⽚上传我⽤到了Jquery中的uploadify和UI,所以需要引⽤jquery.uploadify.min.js和jquery-ui.jsJquery中uploadify有基于flash和基于HTML两个版本，后者是要$5。
这个，，我还是⽤的基于flash的。
那么还需要添加swfobject.js引⽤。
这些引⽤的下载就不贴了，⽹上很多很多。
基本介绍完了，下⾯直接看代码：<style type="text/css">.mceuploadify{display:block;}</style><link rel="stylesheet" href="@Url.Content("~/uploadify/uploadify.css")"/><script type="text/javascript" src="@Url.Content("~/Content/js/history.js")"></script><script type="text/javascript" src="@Url.Content("~/tinymce_4.3.12/tinymce/js/tinymce/tinymce.min.js")"></script><script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script><script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.js")"></script><script type="text/javascript" src="@Url.Content("~/uploadify/jquery.uploadify.min.js")"></script><script type="text/javascript" src="@Url.Content("~/uploadify/swfobject.js")"></script><script type="text/javascript">$(document).ready(function () {var tinymceEditor;tinymce.init({selector: "textarea#Content",auto_focus: "Content",language: "zh_CN",theme: "modern",plugins: ["advlist autolink lists link image charmap preview","searchreplace visualblocks fullscreen","insertdatetime media table contextmenu paste","emoticons textcolor"],toolbar1: "undo redo | styleselect | fontselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",toolbar2: "fullscreen preview | forecolor backcolor emoticons | table | link image media | mybutton",setup: function (editor) {editor.addButton('mybutton', {text: '上传图⽚',icon: false,onclick: function () {tinymceEditor = editor;$("#uploadofedit").dialog({modal: false,resizable: false,width: 400,height: 200,dialogClass: "mceuploadify"});}});},//TinyMCE 会将所有的 font 元素转换成 span 元素convert_fonts_to_spans: true,//换⾏符会被转换成 br 元素convert_newlines_to_brs: false,//在换⾏处 TinyMCE 会⽤ BR 元素⽽不是插⼊段落force_br_newlines: false,//当返回或进⼊ Mozilla/Firefox 时，这个选项可以打开/关闭段落的建⽴force_p_newlines: false,//这个选项控制是否将换⾏符从输出的 HTML 中去除。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
引用:
/yanghbmail/blog/item/6fc7beec9531e33462d09f2a.htm l
kindEditor完整认识 PHP上调用并上传图片说明。
2011年02月03日星期四 20:26
最近又重新捣鼓了下kindeditor，之前写的一篇文章
/yanghbmail/blog/item/c681be015755160b1d9583e7.htm l感觉有点不太全面细致，所以今天再重新写下。
此文所述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 =
'/kindeditor/attached/'; 这样显示出来的图片，就会带上网站的完整地址
--------upload_json.php 文件修改完毕-------
-------------修改file_manager_json.php文件-----------浏览远程文件时调用
//根目录路径，可以指定绝对路径，比如 /var/www/attached/
$root_path = $php_path . '../attached/'; //相对于JSON.php文件的位置。
//根目录URL，可以指定绝对路径，比如
/attached///此处写全URL地址，在输出时并不会把地址输出来，是一个目录指向地址。
$root_url = $php_url . '../attached/';//相对于JSON.php文件的位置。
到此整个配置就结束了。
yanghbmail 原创转载请保留出处谢谢！
/yanghbmail/blog/item/6fc7beec9531e33462d09f2a.htm l。