最近在研究富文本编辑器,于是在网上搜到了一些比较好用的,其中之一就是wangEditor。其个人网站上的教程(wangEditor3使用手册)已经很详细了,当然关于图片上传的地方,还是需要记录一下方便以后使用。
简单的地方直接上代码吧,这些是最基本的配置,按照教程来就可以:
<script src="../../public/statics/wangEditor3.0.10/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.menus = [
'head', // 标题
'strikeThrough', // 删除线
'link', // 插入链接
'image', // 插入图片
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'table', // 表格
'code', // 插入代码
'undo', // 撤销
]
editor.customConfig.onchange = function (html) {
// html 即变化之后的内容
//alert("已保存")
}
// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = false
editor.customConfig.linkImgCallback = function (url) {
//alert(url) // url 即插入图片的地址
}
// 隐藏“网络图片”tab
editor.create()
</script>
下面就是关于图片上传的部分,当然这些代码要放在editor.create()
这句之前:
editor.customConfig.uploadImgServer = 'upload_file.php' // 上传图片到服务器处理的php脚本
editor.customConfig.uploadFileName = 'file'
editor.customConfig.uploadImgMaxLength = 10
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
alert("图片上传成功!");
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
}
}
其中最重要的两句代码就是:
editor.customConfig.uploadImgServer = 'upload_file.php' // 上传图片到服务器处理的php脚本
editor.customConfig.uploadFileName = 'file'
当上传图片时,我们打开审查元素,选择network,查看文件的加载情况,可以看到它成功地访问到了服务器的代码:upload_file.php
接下来点进去:
可以看到上传的图片的name为”file”,也就是之前配置中写的那个editor.customConfig.uploadFileName = 'file'
,那么需要注意的是,在后台的服务器代码中就是根据这个获取的,
<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 5*1024*1024))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else
{
if (file_exists("../../upload/images/content_img/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"../../upload/images/content_img/" . $_FILES["file"]["name"]);
//echo "Stored in: " . "upload/images/content_img/" . $_FILES["file"]["name"];
$picAddr = Array("../../upload/images/content_img/" . $_FILES["file"]["name"]);
$result = Array('errno' => 0, 'data' => $picAddr);
echo json_encode($result);
}
}
}
else
{
//echo "Invalid file";
$picAddr = Array("../../upload/images/content_img/" . $_FILES["file"]["name"]);
$result = Array('errno' => 1, 'data' => $picAddr);
echo json_encode($result);
}
?>
这是后台upload_file.php文件,$_FILES["file"]
这个地方的要用file来获取,与前面的对应起来,否组就会获取不到,其次就是根据官网的说明,必须返回json格式如下:
查看网站的返回:
像这样的才能成功上传,在php中,就是这段代码构造的json格式:
$picAddr = Array("../../upload/images/content_img/" . $_FILES["file"]["name"]);
$result = Array('errno' => 0, 'data' => $picAddr);
echo json_encode($result);
所以总结一下,有如下几个要点:
- 在js中写下:
editor.customConfig.uploadImgServer = 'upload_file.php'
表示后台处理的文件 - js中的
editor.customConfig.uploadFileName = 'file'
要与后台中的$_FILES["file"]
对应起来 - 返回正确格式的json字符串