Comment implémenter le téléchargement d'image dans l'éditeur de balisage PageDown?

Question

Pour mettre en œuvre le téléchargement d'images dans l'éditeur de balisage PageDown, j'ai modifié du code sur l'éditeur.

Markdown.Editor.js

var defaultsStrings = {ImageDialog: "id = entrée < 'image' type = 'fichier' />"}

Quand sélectionnez une image puis cliquez sur le bouton OK pour envoyer une requête ajax. Il peut retourner le chemin de l'image.

var okButton = doc.createElement("input"); 
     okButton.type = "button"; 
     okButton.onclick = function() { 
      var data = new FormData(); 
      data.append('file', $('#image')[0].files[0]); 
      $.ajax({ 
       url: 'uploadFile', 
       data: data, 
       processData: false, 
       contentType: false, 
       type: 'POST', 
       success: function (data) { 
        alert(path); 
       } 
      }); 
      return close(false);}; 

Comment afficher un aperçu de l'image dans l'éditeur zone de prévisualisation?

Answer 1

Cette article fournir une méthode utile,

editor.hooks.set("insertImageDialog", function (callback) { 
var $input = $('<input type="file" name="File" id="file_0" class = "fileUpload"/>'); 
var $okButton = $('<a class="okButton">'+uploadOK()+'</a>'); 
$okButton.click(function(){ 
     var data = new FormData(); 
     var file = $input[0].files[0]; 
     if (file === undefined || null === file) { 
      // alert("error message); 
     } else { 
     data.append('file', file); 
     $.ajax({ 
      url: 'uploadFile', 
      data: data, 
      dataType : 'json', 
      processData: false, 
      contentType: false, 
      type: 'POST', 
      success: function (data) { 
        callback(data.dataObject.url); 
      }, 
      error : function(data){ 
        // error 
      } 
     });  
     } 
    });)