Search code examples
ajaxform-datapagedown

How to implement image upload to the PageDown markdown editor?


To implement image upload to the PageDown markdown editor, I have modified some code about the editor.

Markdown.Editor.js

var defaultsStrings = { imagedialog : "< input id='image' type='file' />" }

When select a picture and then click ok button to sent ajax request. It can return image path.

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

How to preview the image in the editor preview area?


Solution

  • This article provide a useful method,

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