Integrate medium.js insert image plugin in angularjs and firebase app

Question

I am making a web app in which users can post their own articles just like medium.com. My app is in angular and I have connected it with firebase. Now, I want that users should be able to add images in their posts. I have already implemented the medium-editor in my app but am not able to implement its insert-image plugin which requirs jquery. I am new to angularjs and not able to find a solution.

Answer 1

I finally did it and the solution is here -

var editor = new MediumEditor('.editable', {
            toolbar: {
                /* These are the default options for the toolbar,
                   if nothing is passed this is what is used */
                allowMultiParagraphSelection: true,
                buttons: ['bold', 'italic', 'underline', 'anchor', 'strikethrough', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'quote', 'subscript', 'superscript', 'orderedlist', 'unorderedlist', 'indent', 'outdent', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'image'],
                diffLeft: 0,
                diffTop: -10,
                firstButtonClass: 'medium-editor-button-first',
                lastButtonClass: 'medium-editor-button-last',
                relativeContainer: null,
                standardizeSelectionStart: false,
                static: false,
                /* options which only apply when static is true */
                align: 'center',
                sticky: false,
                updateOnEmptySelection: false
            },
            anchor: {
                /* These are the default options for anchor form,
                   if nothing is passed this is what it used */
                customClassOption: null,
                customClassOptionText: 'Button',
                linkValidation: true,
                placeholderText: 'Paste or type a link',
                targetCheckbox: false,
                targetCheckboxText: 'Open in new window'
            },
            anchorPreview: {
                /* These are the default options for anchor preview,
                   if nothing is passed this is what it used */
                hideDelay: 500,
                previewValueSelector: 'a',
                color: "black"
            },
            autoLink: true,


        });

        $(function() {
            $('.editable').mediumInsert({
                editor: editor,
                addons: { // (object) Addons configuration
                    images: { // (object) Image addon configuration
                        label: '<span class="fa fa-camera"></span>', // (string) A label for an image addon
                        uploadScript: null, // DEPRECATED: Use fileUploadOptions instead
                        deleteScript: 'delete.php', // (string) A relative path to a delete script
                        deleteMethod: 'POST',
                        fileDeleteOptions: {}, // (object) extra parameters send on the delete ajax request, see http://api.jquery.com/jquery.ajax/
                        preview: true, // (boolean) Show an image before it is uploaded (only in browsers that support this feature)
                        captions: true, // (boolean) Enable captions
                        captionPlaceholder: 'Type caption for image (optional)', // (string) Caption placeholder
                        autoGrid: 3, // (integer) Min number of images that automatically form a grid
                        formData: {}, // DEPRECATED: Use fileUploadOptions instead
                        fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
                            url: 'upload.php', // (string) A relative path to an upload script
                            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i // (regexp) Regexp of accepted file types
                        },
                        styles: { // (object) Available image styles configuration
                            wide: { // (object) Image style configuration. Key is used as a class name added to an image, when the style is selected (.medium-insert-images-wide)
                                label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
                                added: function($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
                                removed: function($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
                            },
                            left: {
                                label: '<span class="fa fa-align-left"></span>'
                            },
                            right: {
                                label: '<span class="fa fa-align-right"></span>'
                            },
                            grid: {
                                label: '<span class="fa fa-th"></span>'
                            }
                        },
                        actions: { // (object) Actions for an optional second toolbar
                            remove: { // (object) Remove action configuration
                                label: '<span class="fa fa-times"></span>', // (string) Label for an action
                                clicked: function($el) { // (function) Callback function called when an action is selected
                                    var $event = $.Event('keydown');
                                    $event.which = 8;
                                    $(document).trigger($event);
                                }
                            }
                        },
                        messages: {
                            acceptFileTypesError: 'This file is not in a supported format: ',
                            maxFileSizeError: 'This file is too big: '
                        },
                        uploadCompleted: function($el, data) {}, // (function) Callback function called when upload is completed
                        uploadFailed: function(uploadErrors, data) {
                                alert('There is a problem in uploading the image');
                                console.log(uploadErrors);
                                console.log(data);
                            } // (function) Callback function called when upload failed
                    }
                }
            });
        });

This is the controller code.

 <textarea class="editable" ng-model="full"></textarea>

this is HTML.

Answer 2

MediumEditor supports dragging and dropping images directly into the editor by default. I'm not sure if that's the functionality you were looking for, but it should allow users to drag images in that way at least.