富文本编辑器 - 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.页面: < ...
随机推荐
- Flex LinkButton鼠标划过出现下划线
在LinkButton中 textDecoration属性设置label的是否有下划线装饰,属性值分为"none","underline" 代码如下------ ...
- TCP传输连接建立与释放详解
一直以来有许多读者朋友对TCP的传输连接建立和释放过程不是很理解,而这又是几乎网络认证中必考的知识点,包括软考.CCNA\CCNP.H3CNA\H3CNE等,为此再把笔者年度巨作,广受好评的——< ...
- Oracle行转列实例
行转列之前的数据: select * from tbname; 行转列之后的数据: select pud, listagg(ud, ',') within group(order by null) a ...
- java覆写hashcode方法
覆写hashcode 1. 把某个非零常数值,例如17,保存在int变量result中: 2. 对于对象中每一个关键域f(指equals方法中考虑的每一个域): 3, boolean型,计算(f? 0 ...
- JPEG概述和头分析（C源码）
原创文章,转载请注明:JPEG概述和头分析(C源码) By Lucio.Yang 部分内容来自:w285868925,JPEG压缩标准 1.JPEG概述 JPEG是一个压缩标准,又可分为标准 JPE ...
- json对象的操作，json工具
项目中经常用到json,现在把写了几个js函数,用来获取json对象或者json字符串的长度,以及获取其的key值,value值,并且返回. 这样以后可以直接拿来用,可以省去不少麻烦,也方便以后查看. ...
- ASP.NET MVC5 学习笔记-2 Razor
1. Razor @*注释*@ 你在用 @Request.Browser.Browser, 发送邮件给support@qq.com, 转义@@qq @{ var amounts = new List& ...
- NAS简介
转自IBM资料库:https://community.emc.com/docs/DOC-15977 在20世纪80年代初,英国纽卡斯尔大学布赖恩.兰德尔教授 ( Brian Randell)和同事通过 ...
- Introduction to REST #Reprinted#
from http://www.cnblogs.com/shanyou/archive/2012/05/12/2496959.html dudu的 HttpClient + ASP.NET Web A ...
- perl学习(3) 列表
列表或称为数组,和c语言中的数据类似,只是perl自己特殊的一些写法. 1.1.定义 一个列表或者数组可以包含数字,字符串,undef 值,或者任意不同类型的标量值的组合,但是这些元素的类型通常是 ...