Added an option for uploading images to a server

[beatnbite]

I've added the option to upload images to a server instead of embedding them into the content. Want to share it with you.

[edbizarro]

+1

[gojko]

thanks for sharing but this would make the editor php specific. things like this should be done externally, we want to keep the editor minimal.

[beatnbite]

No, it won't make the editor to be PHP specific - I specified a PHP script in the editor settings for an example only!

You can use any server language you want to process the upload ajax request sent from your JavaScript library to get the image saved on the server and return the image URL back to the JavaScript.

So, I would appreciate if you check the pull request once again and approve it.

Thanks!

[DanielRiveraHolguin]

hi, if you want that will show a message for "waiting" while uploading picture to server, only add this lines

[DanielRiveraHolguin]

if you want to change the height and width of the image, add these lines, I know it can be improved, Greetings

add in bootstrap-wysiwyg.js line 58 more or less:

$.fn.sizeimage = function(pos){
    var imageresize=$(this);
    var himagereal=$(imageresize).attr("height");
    var wimagereal=$(imageresize).attr("width");
    console.log(himagereal);
     $(this).popover('destroy');            
     var content__='<div><strong>Dimensions</strong><br>';
        content__+='<span class="glyphicon glyphicon-resize-vertical"></span><input id="heightimage_" type="text" style="width:50px;"/>px<br>';
        content__+='<span class="glyphicon glyphicon-resize-horizontal"></span><input id="widthimage_" type="text" style="width:50px;"/>px<br>';
        content__+='<div class="text-center" style="margin-top:4px;"><button class="btn btn-primary" id="okimage_">OK</button></div>';       
     var pop_ = $(this).popover({
         content:   content__,
         html:      true,
         trigger:   'manual'            
     }).on('shown.bs.popover', function () {
          var left = pos.pageX;
          var top = pos.pageY;          
          $(".popover").css("left", left - 180);
          $(".popover").css("top",top - 180);   
          $("#widthimage_").val(wimagereal);
          $("#heightimage_").val(himagereal);
      });           
        pop_.popover('show');
      $("#okimage_").click(function(){        
        $(imageresize).attr("height",$("#heightimage_").val());
        $(imageresize).attr("width",$("#widthimage_").val());
        pop_.popover('hide');   
      });         
};

and then where you put :

$('#editor').wysiwyg({ uploadScript: '[script]', uploadOptions: { post_id: '10', revision_id: '3' } });

you add this lines:

$("body").on("click","#editor img",function(pos){
$(this).sizeimage(pos); });