效果：

、

项目结构图：

wangEditor-upload-img.html代码：

<html>

	<head>

		<title>wangEditor-图片上传</title>

		<link rel="stylesheet" href="wangEditor/css/wangEditor-1.3.0.min.css">

		<style type="text/css">

			.wrap{

				margin:30px 30px 0 30px;

			}

			#txt_wangEditor{

				width:100%;

				height:300px;

			}

		</style>

	</head>

	<body>

		<!--上传-->

		<div id="uploadContainer">

			<input type="button" value="选择文件" id="btnBrowse"/>

			<input type="button" value="上传文件" id="btnUpload">

			<ul id="fileList"></ul>

		</div>

		<!--富文本编辑器-->

		<div class="wrap">

			<textarea id="txt_wangEditor"></textarea>

			<input type="button" id="submit" value="获取内容">

		</div>

		<!-- JQuery -->

		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

		<!-- wangEditor-富文本编辑器 -->

		<script type="text/javascript" src="wangEditor/js/wangEditor-1.3.5.min.js"></script>

		<!-- plupload-上传组件 -->

		<script type="text/javascript" src="plupload/plupload.full.min.js"></script>

		<!-- js -->

		<script type="text/javascript">

			$(document).ready(function(){

				//获取dom节点

				var $uploadContainer = $('#uploadContainer'),

						$fileList = $('#fileList'),

						$btnUpload = $('#btnUpload');

				//实例化富文本编辑器

				var editor = $('#txt_wangEditor').wangEditor({

					//重要：传入 uploadImgComponent 参数，值为 $uploadContainer

					uploadImgComponent: $uploadContainer,

					//表情

					 'expressions':geticon()

				});

				//实例化一个上传对象

				var uploader = new plupload.Uploader({

					browse_button: 'btnBrowse',

					url: 'upload.php',

					flash_swf_url: 'plupload/Moxie.swf',

					sliverlight_xap_url: 'plupload/Moxie.xap',

					filters: {

								mime_types: [

								  //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）

								  { title: "图片文件", extensions: "jpg,gif,png,bmp" }

								]

						}

				});

				//存储多个图片的url地址

				var urls = [];

				//重要：定义 event 变量，会在下文（触发上传事件时）被赋值

				var event;

				//初始化

				uploader.init();

				//绑定文件添加到队列的事件

				uploader.bind('FilesAdded', function (uploader, files) {

						//显示添加进来的文件名

					$.each(files, function(key, value){

						var fileName = value.name,

							html = '<li>' + fileName + '</li>';

						$fileList.append(html);

					});

				});

				//单个文件上传之后

				uploader.bind('FileUploaded', function (uploader, file, responseObject) {

						//从服务器返回图片url地址

					var url = responseObject.response;

						//先将url地址存储来，待所有图片都上传完了，再统一处理

					urls.push(url);

					});

					//全部文件上传时候

				uploader.bind('UploadComplete', function (uploader, files) {

					// 用 try catch 兼容IE低版本的异常情况

					try {

						//打印出所有图片的url地址

						$.each(urls, function (key, value) {

							//重要：调用 editor.command 方法，把每一个图片的url，都插入到编辑器中

							//重要：此处的 event 即上文定义的 event 变量

							editor.command(event, 'insertHTML', '<img src="' + value + '"/>');

						});

					} catch (ex) {

						// 此处可不写代码

					} finally {

						//清空url数组

						urls = [];

						//清空显示列表

						$fileList.html('');

					}

				});

				//上传事件

				$btnUpload.click(function(e){

					//重要：将事件参数 e 赋值给 上文定义的 event 变量

					event = e;

					uploader.start();

				});

			})

		</script>

	</body>

</html>

upload.php代码：

<?php

	$targetDir = 'upload_tmp';

	$uploadDir = 'upload';

	$cleanupTargetDir = true; 

	if (!file_exists($targetDir)) {

		@mkdir($targetDir);

	}

	if (!file_exists($uploadDir)) {

		@mkdir($uploadDir);

	}

	if (isset($_REQUEST["name"])) {

		$fileName = $_REQUEST["name"];

	} elseif (!empty($_FILES)) {

		$fileName = $_FILES["file"]["name"];

	} else {

		$fileName = uniqid("file_");

	}

	$fileName = iconv('UTF-8', 'GB2312', $fileName);

	$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;

	$uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;

	$imgUrl="http://localhost:8088/FileUpload/".$uploadDir."/".$fileName;

	echo $imgUrl;

	$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;

	$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;

	if ($cleanupTargetDir) {

		if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {

			die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');

		}

		while (($file = readdir($dir)) !== false) {

			$tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;

			if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {

				continue;

			}

			if (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {

				@unlink($tmpfilePath);

			}

		}

		closedir($dir);

	}

	if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {

		die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');

	}

	if (!empty($_FILES)) {

		if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {

			die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');

		}

		if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {

			die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');

		}

	} else {

		if (!$in = @fopen("php://input", "rb")) {

			die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');

		}

	}

	while ($buff = fread($in, 4096)) {

		fwrite($out, $buff);

	}

	@fclose($out);

	@fclose($in);

	rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");

	$index = 0;

	$done = true;

	for( $index = 0; $index < $chunks; $index++ ) {

		if ( !file_exists("{$filePath}_{$index}.part") ) {

			$done = false;

			break;

		}

	}

	if ( $done ) {

		if (!$out = @fopen($uploadPath, "wb")) {

			die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');

		}

		if ( flock($out, LOCK_EX) ) {

			for( $index = 0; $index < $chunks; $index++ ) {

				if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {

					break;

				}

				while ($buff = fread($in, 4096)) {

					fwrite($out, $buff);

				}

				@fclose($in);

				@unlink("{$filePath}_{$index}.part");

			}

			flock($out, LOCK_UN);

		}

		@fclose($out);

	}

原版视频及其源码：http://www.kancloud.cn/wangfupeng/wangeditor/65747

富文本编辑器 - wangEditor 上传图片的更多相关文章

  1. vue-quill-editor富文本编辑器，上传图片自定义为借口上传

    vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194

  2. bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片

    bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片   bootstrap-wysihtml5实际使用内核为ckeditor     故这里修改ckeditor即可 ...

  3. 富文本编辑器(wangEditor)

    近期在产品的开发工作中遇到要使用富文本编辑器的地方.于是对比了几款编辑器, 最后选择了wangEditor. 优点:轻量.简洁.界面美观.文档齐全.   缺点: 相较于百度ueditor等编辑器功能较 ...

  4. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  5. 轻量级富文本编辑器wangEditor

    开发公司一个系统的时候需要一个富文本编辑器,找了几个,最后选择这个,蛮不错的. 百度搜索wangEditor,进入官网根据所介绍的使用进行开发就可以了,很不错的一个工具.

  6. 前端轻量级、简单、易用的富文本编辑器 wangEditor 的基本用法

    1.富文本编辑器市面上有很多,但是综合考虑之后wangEditor是最易用的框架,推荐使用 首先进入官网 http://www.wangeditor.com 基本是2中方式引入: 使用CDN://un ...

  7. KindEditor - 富文本编辑器 - 使用+上传图片

    代码高亮:http://www.cnblogs.com/KTblog/p/5205214.html 效果: 项目结构: Extend:存放各种扩展 BlogAction.class.php:博文模块 ...

  8. 富文本编辑器--FCKEditor 上传图片

    FCKEditor的最新版本已经更改名称为CKEditor: 1.在页面引入fckeditor目录下的fckeditor.js <script type="text/javascrip ...

  9. 富文本编辑器 wangEditor.js

    1.引用 wangEditor 相关js  和 css 下载地址:https://files.cnblogs.com/files/kitty-blog/WangEditor.zip 3.页面: < ...

随机推荐

  1. js 获取前天、昨天、今天、明天、后天的时间

    js 获取前天.昨天.今天.明天.后天的时间 2011-05-19 21:03   <html><head><meta http-equiv="Content- ...

  2. 利用Linux命令行进行文本按行去重并按重复次数排序

    最近杂事太多,正事进展缓慢.Fighting! linux命令行提供了非常强大的文本处理功能,组合利用linux命令能实现好多强大的功能.本文这里举例说明如何利用Linux命令行进行文本按行去重并按重 ...

  3. ADO.NET基础笔记

    ADO.NET 程序要和数据库交互要通过ADO.NET进行,通过ADO.Net就能在程序中执行SQL了. ADO.Net中提供了对各种不同的数据库的统一操作接口. 连接字符串: 程序通过连接字符串指定 ...

  4. openstack第1天

    入门openstack题外篇 老实说,我在写这篇文章的时候,对云的了解还是比较模糊的,也许是刚接触,不管怎样 总得写点什么,写完之后也许数月之后,感觉写的不是那么好,到时候在做修该吧! 今天我们就提一 ...

  5. BZOJ 1194: [HNOI2006]潘多拉的盒子( BFS + tarjan + dp )

    O(S²)枚举2个诅咒机, 然后O(n²)BFS去判断. 构成一个有向图, tarjan缩点, 然后就是求DAG的最长路.. ------------------------------------- ...

  6. python笔记之列表与元组函数和方法使用举例

    在学习列表之前先了解了raw_input和input的区别:(仅适用于版本2,版本3中raw_input和input合并,没有raw_input) input的语法为:input("str& ...

  7. PROTEL99 SE生成的gerber 与ncdrill的坐标不对应

    导入cam350后的: 解决方法:出gerber的时候在高级选项里面. 1.数据单位及格式 2.优化设置

  8. Android EditText 无法换行

    问题 关于控制是否换行的属性android:singleLine 当值为true的时候,只能一行,不换行 当值为false的时候,可以换行 但是现在遇到一个问题: <EditText andro ...

  9. Linux上MongoDB的安装与配置

    长话短说,一共有两种方法.(我随便选了一个发行版Mint) 一.apt-get方法 官网上说的很清楚: http://docs.mongodb.org/manual/tutorial/install- ...

  10. BZOJ 1618: [Usaco2008 Nov]Buying Hay 购买干草

    题目 1618: [Usaco2008 Nov]Buying Hay 购买干草 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 679  Solved:  ...