富文本编辑器 - wangEditor 上传图片
效果：
、
项目结构图：
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 上传图片的更多相关文章
- vue-quill-editor富文本编辑器，上传图片自定义为借口上传
vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194
- bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片 bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可 ...
- 富文本编辑器(wangEditor)
近期在产品的开发工作中遇到要使用富文本编辑器的地方.于是对比了几款编辑器, 最后选择了wangEditor. 优点:轻量.简洁.界面美观.文档齐全. 缺点: 相较于百度ueditor等编辑器功能较 ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- 轻量级富文本编辑器wangEditor
开发公司一个系统的时候需要一个富文本编辑器,找了几个,最后选择这个,蛮不错的. 百度搜索wangEditor,进入官网根据所介绍的使用进行开发就可以了,很不错的一个工具.
- 前端轻量级、简单、易用的富文本编辑器 wangEditor 的基本用法
1.富文本编辑器市面上有很多,但是综合考虑之后wangEditor是最易用的框架,推荐使用 首先进入官网 http://www.wangeditor.com 基本是2中方式引入: 使用CDN://un ...
- KindEditor - 富文本编辑器 - 使用+上传图片
代码高亮:http://www.cnblogs.com/KTblog/p/5205214.html 效果: 项目结构: Extend:存放各种扩展 BlogAction.class.php:博文模块 ...
- 富文本编辑器--FCKEditor 上传图片
FCKEditor的最新版本已经更改名称为CKEditor: 1.在页面引入fckeditor目录下的fckeditor.js <script type="text/javascrip ...
- 富文本编辑器 wangEditor.js
1.引用 wangEditor 相关js 和 css 下载地址:https://files.cnblogs.com/files/kitty-blog/WangEditor.zip 3.页面: < ...
随机推荐
- break 与continue的区别
//break是结束整个循环体,continue是结束单次循环 比方说: while(x++ < 10){ if(x == 3) { break; } printf("%d\r\n&q ...
- Effective C++ 条款39
我从本条款中学到了下面内容: 1.private继承不同于另外两种继承,派生类对象不能隐式转换为基类对象. 例如以下代码: class Bird//鸟 { }; class ostrich:priva ...
- [置顶] 如何在Windows 7 64位安装Python，并使用Matplotlib绘图
1. 安装Python 我使用的是Windows 7 64 bit,所以我从Python官网下载python-2.7.5.amd64.msi,安装步骤如下: 1) 安装windo ...
- Android手机之间通过声音传输信息方法——声波通信（含project代码）
大家可能都用过支付宝的声波支付.即两个终端同一时候打开该功能,一个终端作为发送端send,一个终端作为接收端get,send将本终端上发出的请求信息依照约定规则的算法进行声音编码,并播放出来,get端 ...
- junit学习笔记（二）：hamcrest和TestSuit
1. hamcrest hamcrest可以有效增加junit的测试能力,用一些对通俗语言来进行测试. Hamcrest 是一个测试的框架,它提供了一套通用的匹配符 Matcher,灵活使用这些匹配符 ...
- Android发送数据到web服务器4种方式
1./** 2. * Android中向web服务器提交数据的两种方式四种方法 3. */ 4.public class SubmitDataByHttpClientAndOrdinaryWay { ...
- jQuery（二）
table 全选.反选.清除 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- ajax是怎么发请求的和浏览器发的请求一样吗？cookie
下午设置cookie时出现了个问题 用ajax发的post请求php,在php的方法里设置了cookie,然后在浏览器请求的php里打印cookie值但是一直获取不到cookie的值 分析: 1.aj ...
- django virtualenv
1. virtualenv virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够:1. 在没有权限的情况下安装新套件2. 不同应用可以使用不同的套件版本3. ...
- IE11中[if lt IE 9]兼容性问题
IE11不支持<!--[if lt IE 9]> <![endif]--> ,蛋疼的IE!!!