summernote富文本编辑器的自定义附件上传
- 前言
- 一、自定义上传附件按钮和弹窗
- 二、结合PHP上传文件进行后端处理
- 三、用jq模拟点击添加链接方式去处理上传附件
前言
summernote的上传有图片上传只能上传图片，附件上传插件uploadcare-summernote上传的文件不在指定的服务器，所以自己修改了一下的插入链接的方式上传附件功能，此功能可自定义上传文件类型，不只限于图片上传！！！完全可以自定义上传类型
思路：通过插入链接的方式去把自定义上传在自己指定服务器生成的 路径链接 和 文件名 插入编辑器，从而达到一个白嫖的附件上传效果。
一、自定义上传附件按钮和弹窗
-
可以参考官方文档先自定义一个按钮插件–附件上传，方便的可直接下载我的附件。其实很多博客也有添加自定义的插件方法，找找就有。
我的文件中主要是一个简单的弹窗上传文件页面，这个页面可以自定义。
this.createDialog = function () {
var $box = $('<div />');
//变量$yaya 是弹窗中显示的上传文件页面，具体的自定义样式排版等
var $yaya = $('<form name="addForm" id="thinkassUploadFile" action="your web upload_file action" method="post" enctype="multipart/form-data"><div class="form-group"><input type="file" id="macFile" name="macFile" οnchange="thinkassUploadFile()"><div id="message"><div></div></form>');
$box.append($yaya);
return $box.html();
};
- 引入下载的文件，然后再初始化的时候把按钮添加上即可 [‘insert’, [‘upload_file’]]
$(document).ready(function() {
var $summernote = $('#tseditor').summernote({
toolbar: [
['cleaner',['cleaner']],
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
//['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
//重点！！！在这里引入文件中的函数名称 upload_file
['insert', ['link','unlink', 'picture','upload_file']],
['highlight', ['highlight']],
['view', ['fullscreen']],
],
cleaner:{
action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
newline: '<br>', // Summernote's default is to use '<p><br></p>'
notStyle: 'position:absolute;top:0;left:0;right:0', // Position of Notification
icon: '<i class="note-icon">[清理HTML]</i>',
keepHtml: true, // Remove all Html formats
keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>','<img>'], // If keepHtml is true, remove all tags except these
keepClasses: true, // Remove Classes
badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
badAttributes: ['style', 'start'], // Remove attributes from remaining tags
limitChars: false, // 0/false|# 0/false disables option
limitDisplay: 'both', // text|html|both
limitStop: false // true/false
},
placeholder:'开始创作吧...',
height:300,
lang: 'zh-CN',
callbacks: {
onChange: function(contents, $editable) {
//console.log('onChange:', contents, $editable);
content.val(contents)
},
//这个是上传图片的回调地址，上传其他附件识别不到，这个可以重新把上传图片的路径改成自定义sendFile方法是我自定义上传图片的方法
onImageUpload: function(files) {
// upload image to server and create imgNode...
// $summernote.summernote('insertNode', imgNode)
//console.log(files[0])
sendFile($summernote, files[0]);
}
}
});
效果图：
二、结合PHP上传文件进行后端处理
网上搜索一大把—我的是结合thinksaas的处理，直接上代码：
//本地上传文件存储
function uploadFileLocal($file, $fileDir)
{
if (!isset($file)) {
return [
'code'=>1,
'message'=>'上传的文件为null',
'url'=>''
];
}
if (!file_exists('uploadfile/' . $fileDir)) {
mkdir(iconv("UTF-8", "GBK", 'uploadfile/' . $fileDir),0777,true);
}
$fileName=$file["name"];
$fileSize = $file["size"];
$fileType = strstr($fileName, ".");
if ($fileSize>$GLOBALS['TS_SITE']['attach_size'] * 1048576) { // 5M--->512*1024*1024 $GLOBALS['TS_SITE']['attach_size']直接替换成数字
return [
'code'=>1,
'message'=>'大小不能超过'.$GLOBALS['TS_SITE']['attach_size'].'MB,请重新选择',
'url'=>''
];
}
//文件类型过滤：$GLOBALS['TS_SITE']['attach_type']
if (!in_array(substr($fileType,1), explode(",", $GLOBALS['TS_SITE']['attach_type']))) {
return [
'code'=>1,
'message'=>'文件格式只允许'.$GLOBALS['TS_SITE']['attach_type'],
'url'=>''
];
}
$pics = rand(1, 9999) . $fileName;//时间戳/随机数/文件后缀
iconv("UTF-8", "GBK", 'uploadfile/' . $fileDir . '/' . $pics); //文件转义
//将临时文件移动到指定目录
$savFile= move_uploaded_file($file["tmp_name"], 'uploadfile/' . $fileDir . '/' . $pics);
if ($savFile) {
return [
'code'=>0,
'message'=>'success',
'url'=>'uploadfile/' . $fileDir . '/' . $pics
];
} else {
return [
'code'=>1,
'message'=>'上传的文件保存失败',
'url'=>''
];
}
}
三、用jq模拟点击添加链接方式去处理上传附件
以下代码可能会有浏览器不用兼容的场景，需自行解决。
处理上传文件代码如下（示例）：
//处理文件商场
function thinkassUploadFile() {
var formData = new FormData(document.getElementById('thinkassUploadFile'));
$.ajax({
url:"指定到后端处理问价上传的方法uploadFileLocal",
type:"post",
data:formData,
dataType: 'json',
processData:false,// 告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
success:function(data){
if (data.code===0) {
var html = '<p class="text-success">文件上传成功：请关闭当前弹窗（如果未自动复制，请手动复制），然后手动添加链接 <i class="note-icon-link"></i>，把所复制内容填进<链接地址></p><br/><p><span class="text-danger">'+data.url+'</span></p>';
$("#message").html(html);
$(".footer").append('<div style="diaplay:none" class="appendHide"><input id="hide" type="text" style="opacity: 0" value="'+data.url+'"></div>');
copyAndInsert(data.url);
}else{
var html = '<p>附件上传失败：<i class="text-danger">'+data.message+'</i></p>';
$("#message").html(html);
}
},
error:function(e){
$("#uploderr").html(data.message)
}
});
}
//处理模拟插入链接的按钮把生成的上传到服务器的文件地址插入
function copyAndInsert(url) {
var hide=document.getElementById("hide");
hide.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
//alert("已自动复制好生成的附件链接,即将到插入链接页面进行操作");
alert("已自动复制好生成的附件链接,若插入失败请更换 谷歌浏览器 或者 360浏览器极速模式 再试");
$(".appendHide").remove();
$(".upload_file").removeClass("open");
$(".note-modal-backdrop").remove();
//模拟点击插入链接按钮
$(".note-icon-link").trigger("click");
//把链接赋值到插入链接地址中
$(':focus').val(url);
var id = $(':focus').attr('id');
//附件标题--链接文本
var newstart = id.replace(/url/, "txt");
//动态获取附件名称
var fileName =url.substr(url.lastIndexOf('/')+1);
$("#"+newstart).trigger("focus");
//把文件名称赋值到链接的显示文本中
$("#"+newstart).val(fileName);
//去掉插入链接的禁用属性
var insert = $("#"+newstart).parent().parent().next().children("input");
insert.removeClass("disabled").removeAttr("disabled");
//模拟点击提交按钮
$(insert).trigger("click");
}
就是这么简单！！！以上内容如有侵权请联系我谢谢~
转载请标明出处谢谢~
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)