在 angularjs 和 firebase 应用程序中集成 medium.js 插入图像插件

Question

我正在制作一个网络应用程序，用户可以在其中发布自己的文章，就像medium.com。我的应用程序是有角度的，我已将它与 firebase 连接起来。现在，我希望用户应该能够在他们的帖子中添加图像。我已经在我的应用程序中实现了中等编辑器，但无法实现需要 jquery 的 insert-image plugin。 我是 angularjs 新手，无法找到解决方案。

Answer 1

MediumEditor 默认支持将图像直接拖放到编辑器中。我不确定这是否是您正在寻找的功能，但它至少应该允许用户以这种方式拖动图像。

Answer 2

我终于做到了，解决方案就在这里-

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
                    }
                }
            });
        });

这是控制器代码。

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

这是 HTML。