每天推荐有价值的网站、工具、课程、书籍、文章,每天凌晨之前发布。
今天来推荐一个免费开源、无依赖的插件-Inline Attachment,使用 Inline Attachment 轻松的实现拖拽和剪切板粘贴上传图片,看看它动图效果:
图片来源于官网使用起来很方便,从 Github 上下载 inline-attachment.js
和 input.inline-attachment.js
两个文件然后引入就可以。
<script src="{{asset('js/inline-attachment.js')}}"></script>
<script src="{{asset('js/input.inline-attachment.js')}}"></script>
配置 Inline Attachment
:
<script>
inlineAttachment.editors.input.attachToInput(document.getElementById("content"), {
uploadUrl:'{{route('upload.images')}}',
extraParams: {
'_token': '{{csrf_token()}}',
},
onFileUploadResponse: function(xhr) {
var result = JSON.parse(xhr.responseText),
filename = result[this.settings.jsonFieldName];
if (result && filename) {
var newValue;
if (typeof this.settings.urlText === 'function') {
newValue = this.settings.urlText.call(this, filename, result);
} else {
newValue = this.settings.urlText.replace(this.filenameTag, filename);
}
var text = this.editor.getValue().replace(this.lastValue, newValue);
this.editor.setValue(text);
this.settings.onFileUploaded.call(this, filename);
}
return false;
}
});
</script>
从代码中我们可以看到,我们先将其绑定到我们的 textarea 上,并且我们设置了 uploadUrl 项指定了图片上传地址,请自行改为自己的后端上传图片地址。
当然好的解决方案可能还有很多,如果你有更好的推荐,可以到留言区评论,把好的方案推荐给更多的人。
感谢阅读,不喜勿喷,以人为善,比聪明更重要。
SevDot 是一个帮助开发者成长的网站。
表达爱的方式是关注和点赞,有打赏就更完美了。
了解更多
网友评论