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

我正在製作一個Web應用程序，用戶可以在其中發佈自己的文章，就像medium.com一樣。我的應用程序處於角度，我已將它與Firebase連接起來。現在，我希望用戶應該能夠在他們的帖子中添加圖片。我已經在我的應用程序中實現了中等編輯器，但無法實現其需要jquery的insert-image plugin。我是angularjs的新手，無法找到解決方案。在angularjs和firebase應用程序中集成medium.js插入圖像插件

來源

2016-12-30 Bharat Chhabra

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。

來源

2017-01-09 07:21:13

默認情況下，MediumEditor支持將圖像直接拖放到編輯器中。我不確定這是否是您正在尋找的功能，但它應該允許用戶至少以這種方式拖動圖像。

來源

2017-02-11 02:53:03

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

回答

相關問題