Tag Archives: pagedown

Image upload to the PageDown (markdown) editor via AJAX in Rails

I have been using the updated version of the WMD markdown editor called as Pagedown for a blog engine, and wanted to have an Image Upload functionality.

If you take a look at Pagedown wiki, you will realize it has a very limited set of API’s – but has the one we need , a hook for ‘insert Image button’ called as insertImageDialog.

I had the following requirements for achieving Image Upload

  1. Markdown Editor (Pagedown)
  2. Bootstrap
  3. Rails + AJAX Uploads of Images.
  4. Preview of the image + ability to select size, before inserting into post.

Markdown Hook for Image Button.

The example from the Pagedown wiki, shows how the insertImageDialog.hook can be used.

editor.hooks.set("insertImageDialog", function (callback) {
      alert("Please click okay to start scanning your brain...");
      setTimeout(function () {
          var prompt = "We have detected that you like cats. Do you want to insert an image of a cat?";
          if (confirm(prompt))
              callback("http://icanhascheezburger.files.wordpress.com/2007/06/schrodingers-lolcat1.jpg")
          else
              callback(null);
      }, 2000);
     return true; // tell the editor that we'll take care of getting the image url
    });

This tells us to register a plugin on the insertImageDialog hook that returns true (which tells the editor not to create its own dialog). so the callback method is the one which returns the actual URL of the uploaded images.

I recommend you try the above code, so that you know how the hooks are working within your editor.

Twitter Boostrap Markdown

This project is a pagedown (markdown) editor, styled for bootstrap. Take a look at the demo. I have made use of these pagedown code.

I would advice you to take a look at the source of this demo, to understand how all components tie-up.

RAILS + AJAX Uploads of Images + Image Preview and Re-sizing.

For doing AJAX uploads using a jQuery plugin and carrier-wave turned out to be easier because I went ahead with ‘jquery-fileupload-rails’ . Though there can be some challenges if you are using nested_forms. (This Rails-casts should help you figuring out the integration http://railscasts.com/episodes/381-jquery-file-upload).

With all the components laid above, I can walk you through the approach I took…

1. First Create a Modal for the dialog to appear on click of the insert Image..

<!-- Modal -->
<div id="fileModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h3 id="fileModalLabel">Upload Images</h3>
 </div>
 <div class="modal-form">
 <div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
 <ul class="nav nav-tabs">
 <li class="active"><a href="#tab1" data-toggle="tab">Upload</a></li>
 <li><a href="#tab2" data-toggle="tab">Enter URL</a></li>
 </ul>
 <div class="tab-content">
 <div class="tab-pane active" id="tab1">
 <%= f.file_field :photo %>
 <div class="preview" id="preview" >
 </div>
 </div>
 <div class="tab-pane" id="tab2">
 <p><input type="text" class="img-url" placeholder="Ex: http://yoursite.com/image.jpg" id="img-url" /></p>
 </div>
 </div>
 </div>
 </div> <!-- End of Modal-Body -->
 <div class="modal-footer">
 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
 <button class="btn" id="insert_image_post">Insert Image</button>
 </div>
</div>
<% end %>

The above modal code would render like this. Image Upload Markdown Bootstrap Rails

2. Bind the Pagedown hook to show the above modal.

This is the easy part, as you saw above how the insertImageDialog hook behaves, we would link these together as.

<script type="text/javascript">
 (function () {
 var converter = new Markdown.Converter();
 var help = function () { window.open('http://stackoverflow.com/editing-help'); }
 var editor = new Markdown.Editor(converter);
 editor.hooks.set("insertImageDialog", function (callback) {
 setTimeout(function () 
{
       $('#fileModal').modal();
        ...
        ...
       $("#insert_image_post").click(function(e) {
          e.preventDefault();
          if($(".upload-photo").length>0)
         {
            var images;
            $(".upload-photo").each(function(){
            images = "" + ($(this).filter("[src]").attr("src"));
          })
         callback(images);
       $('#upload_photo').fileupload();
        }
       else {
          var image=$("#img-url").val();
          callback(image);
        }
      $("#fileModal").modal('hide');
    });
 }, 0);
 return true; // tell the editor that we'll take care of getting the image url
 });
editor.run();
 })();
 </script>

To actually see how Ajax Jquery Uploads and carrierwave would interact you can look at the Railscasts http://railscasts.com/episodes/381-jquery-file-upload .

For the entire working code, look at the following repository.