It is recommended that the 9th issue of Inline Attachment.js, an open-source plug-in, be used every day to drag and upload images on the clipboard

Recommend valuable websites, tools, courses, books and articles every day, and publish them before dawn every day.

Today we recommend a free, open-source, independent plug-in- Inline Attachment , use Inline Attachment to easily drag and paste the uploaded image with the clipboard to see its dynamic effect:

Picture from official website

It's very convenient to use Github Download the two files, inline attachment.js and input.inline-attachment.js, and then import them.

<script src="{{asset('js/inline-attachment.js')}}"></script>
<script src="{{asset('js/input.inline-attachment.js')}}"></script>

To configure 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>

From the code, we can see that we first bind it to our textarea, and we set the uploadUrl item to specify the image upload address. Please change it to your own back-end upload image address.

Of course, there are many good solutions. If you have better recommendations, you can comment in the message area and recommend the good solutions to more people.

Thank you for reading. Don't spray if you don't like it. It's more important to be good than smart.
SevDot is a website that helps developers grow.
The way to express love is to pay attention and praise. Rewards are more perfect.
Learn more

Tags: github JSON

Posted on Tue, 03 Dec 2019 14:11:35 -0500 by Bind