效果：

、

项目结构图：

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. python Unicode转ascii码的一种方法

    缘起 看到这样的数据:Marek Čech.Beniardá怎样变成相对应的ascii码呢 解决 import unicodedata s = u"Marek Čech" #(u表 ...

  2. struts之拦截器

    拦截器是为了让一些自己不希望发生的事情进行预防.以下我说一下struts自己定义拦截器. 以下我贴下struts.xml里的自定义的拦截器: <package name="my&quo ...

  3. HDU 1222（数论，最大公约数）

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Descr ...

  4. C#用正则表达式 获取网页源代码标签的属性或值

    1.有url获取到网页源代码: using System.Web; using System.IO; using System.Net; private void GetHtmlinfo(string ...

  5. 2351: [BeiJing2011]Matrix( hash )

    hash一下, 把原矩阵所有A*B的子矩阵的hash值存在set里面, 然后对于每个询问就求出hash值, 在set中查找. ------------------------------------- ...

  6. python命令行解析工具argparse模块【5】

            上一节我们学习了parse_args()的用法,这一节,我们将继续学习argparse的其他一些用法.         1.sub-commands子命令         argpar ...

  7. python命令行解析工具argparse模块【2】

    上一节,我们简要的介绍了argparse的用法,接下来几节,将详细讲解其中的参数及用法,这一节我们讲解ArgumentParser对象. argparse.ArgumentParser([descri ...

  8. [LeetCode]题解（python）：025-Reverse Nodes in k-Group

    题目来源: https://leetcode.com/problems/reverse-nodes-in-k-group/ 题意分析: 这道题目和上一题目类似,输入一个链表和一个整型k.每k个翻转一下 ...

  9. XML 反序列化为Model

    什么也不多说,直接贴代码 需要反序列的XML <?xml version='1.0' encoding='utf-8' ?> <GetCitiesListResponse> & ...

  10. Multiple markers at this line @Override的解决方法

    Multiple markers at this line - implements java.awt.event.ActionListener.actionPerformed - The metho ...