每天推荐第 9 期|开源插件 Inline Attachment

每天推荐有价值的网站、工具、课程、书籍、文章，每天凌晨之前发布。

今天来推荐一个免费开源、无依赖的插件-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 是一个帮助开发者成长的网站。
表达爱的方式是关注和点赞，有打赏就更完美了。
了解更多