Angular-Summernote On-Bild-Upload-Editor Objekt nicht definiert

Question

Ich habe Schwierigkeiten herauszufinden, wie man angular-summernote Callback on-image-upload verwendet.

Der Code aus meiner Sicht:

<summernote data-editable="editable" data-on-image-upload="imageUpload(files, editor)"></summernote> 

Und die imageUplaod Funktion:

$scope.imageUpload = function(files, editor) { 
    console.log(files); // FileList 
    console.log(editor); // undefined 
    console.log($scope.editable); // undefined 
}; 

und das Bild wird in den Editor nicht eingefügt. Ich habe versucht, für das Implementierungsbeispiel auf dem ImageUpload googlen, aber Null finden. Kann mir jemand zeigen, wie es geht?

Answer 1

statt mit 'Editor' Objekt verwenden Sie die folgende, wenn Bild hochgeladen

$ summernote ('editor.insertImage ' URL) (' summernote..');

Answer 2

Ich hatte auch damit zu kämpfen. Die aktuelle Dokumentation für dieses grundlegende Feature ist wirklich schlecht. Wie auch immer, das ist, wie ich es tun:

$scope.imageUpload = function(files) { 
    uploadEditorImage(files); 
}; 

function uploadEditorImage(files) { 
    if (files != null) { 

     // Begin uploading the image. 
     // Here I'm using the ngFileUpload module (named 'Upload') to upload files, but you can use $.ajax if you want 
     // Remember to include the dependency in your Controller! 
     Upload.upload({ 
      url: 'api/resources/upload-file', 
      file: files[0] 
     }).success(function(data, status, headers, config) { 

      // The image has been uploaded to your server. 
      // Now we need to insert the image back into the text editor. 
      var editor = $.summernote.eventHandler.getModule(), 
       uploaded_file_name = data.file_name, // this is the filename as stored on your server. 
       file_location = '/uploads/'+uploaded_file_name; 

      editor.insertImage($scope.editable, file_location, uplaoded_file_name); 

     }); 

    } 

}; 

Der wichtige Teil, um das Bild zu bekommen im Editor angezeigt zurück, dieses Bit hier:

var editor = $.summernote.eventHandler.getModule(), 
      uploaded_file_name = data.file_name, 
      file_location = '/path-where-you-upload-your-image/'+uploaded_file_name; 

editor.insertImage($scope.editable, file_location, uploaded_file_name); 

$.summernote.eventHandler.getModule() alle ruft die API methods heimisch Sommernote. In diesem Fall müssen Sie die Methode insertImage() verwenden, um das hochgeladene Bild wieder in den Editor einzufügen.

Wenn jemand sauberere Lösungen hat dann bitte weitermachen!

Answer 3

Ich habe es durch AngularJS + JQuery auf diese Weise:

$scope.summernoteOptions = { 
    height: 300, 
    focus: true, 
    lang: 'es-ES', 
    callbacks: { 
     onImageUpload: function(files) { 
      var data = new FormData(); 
      data.append("file", files[0]); 
      $.ajax({ 
       data: data, 
       type: "POST", 
       url: "/admin/api/insertar-imagen-summernote.php", 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function(url) { 
        $('.summernote').summernote('editor.insertImage', url); 
       } 
      }); 
     } 
    } 
};