效果：

、

项目结构图：

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. 给定一个字符串里面只有"R" "G" "B" 三个字符，请排序，最终结果的顺序是R在前 G中 B在后。 要求：空间复杂度是O(1)，且只能遍历一次字符串。

    题目:给定一个字符串里面只有"R" "G" "B" 三个字符,请排序,最终结果的顺序是R在前 G中 B在后. 要求:空间复杂度是O(1),且 ...

  2. 看java源代码

    不会看JDK源代码,相当于没学过Java. 网上不容易找到一篇帮助我解决了如何在Eclipse下查看JDK源代码 的文章. 核心提示:在Eclipse中查看JDK类库的源代码!!! 设置: 1.点 w ...

  3. java反射机制入门02

    Field对象的机制与实现 1.Field对象概述 1)Java.lang.reflect.Field类,是用于表示类中.接口中属性对象的类. 2)可以操作类中私有,以及公有等全部属性和属性的信息. ...

  4. s3c2440栈分配情况(fl2440裸机 stack)

    //2440INIT.S ;The location of stacks UserStack EQU (_STACK_BASEADDRESS-0x3800) ;0x33ff4800 ~ SVCStac ...

  5. web测试 结果存储类型为“Database”，但尚未指定结果储存库连接字符串

    vs2010 Ultimate版带有web测试功能,可以对网站的性能以及负载进行测试. 在进行负载测试时提示“异常 LoadTestConnectStringMissingException 1 Lo ...

  6. spring 框架整合 笔记4

    struts hibernate spring 先贴出框架整合需要的maven <project xmlns="http://maven.apache.org/POM/4.0.0&qu ...

  7. cmake 学习笔记(六)

    希望这是现阶段阻碍阅读shiboken和PySide源码的涉及cmake的最后一个障碍 ^ _^ 学习 cmake 的单元测试部分 ctest. 简单使用 最简单的使用ctest的方法,就是在 CMa ...

  8. iOS_第3方类库_BlurAlertView_GPUImage

    最终效果图: 先加入GPUImage.framework 导入BlurAlertView的类声明和类实现 // // BlurAlertView.h // 特效弹出框 // // Created by ...

  9. PHP - 直接输出对象的版本问题

  10. UIApplication相关

    1,显示应用图标右上角的红色提示 application.applicationIconBadgeNumber = 10; 2.修改状态栏的类型 在当前控制器下设置 - (UIStatusBarSty ...