Toolbar for images about medium-editor

[linkesch]

I made jQuery plugin for uploading and handling images, you can try it here: http://orthes.github.io/medium-editor-images-plugin/

Inspired of course by medium.com, but extended with native HTML5 drag&drop.

[daviferreira]

I think it should be a different JavaScript (like Medium.com) because the toolbar works with selections.

[dmitric]

I recently implemented something like this for fun as proof of concept.

The idea is, if you mouseover an empty p, you should show a link to click to upload an image, and replace that p element with an img element with src of the image you just uploaded.

Here's a bit of css, html, jquery goop that could inspire you. I used the InkFilePicker to make the job easier and had a hidden element with id "upload-image" that was in the same container element as ".editable". It' s not perfect, but it's simple.

HTML

<div class="html-editor-container">
<div id="contents" class="editable post-content container" data-placeholder="Type your story">
  {% raw post_content.get("contents") if post_content.get("contents") else "" %}
</div>
<div id="upload-image"><a>add image</a></div>
</div>

CSS

#upload-image {
      display:none;
      top:0;left:0;
}

JS

$(".editable").on("mouseover", "p", function(e){
    var $this = $(this);
    var $upload = $("#upload-image");
    if ($this.text().trim().length == 0) {
      $upload.css("left", $this.offset().left - 75);
      $upload.css("top", $this.position().top + parseFloat($(this).css('marginTop'), 10) - 20);
      $upload.off("click").on("click", function(event){
        event.preventDefault();
        filepicker.pickAndStore({
          mimetypes: ["image/*"],
          multiple: false,
          services:["COMPUTER","URL","FLICKR", "INSTAGRAM", "DROPBOX", "FACEBOOK", "GMAIL"],
        },{
          path: '{{upload_path}}',
          access: "public"
        },
        function(InkBlobs){
          var InkBlob = InkBlobs[0];
          console.log(InkBlob.url);
          $this.after("<img src='"+ InkBlob.url + "' >")
          $this.remove();
          $upload.hide();
          if (autoSave) {
            saveAll();
          }
        },
        function(FPError){

        });
      });
      $upload.show();
    } else {
      $upload.hide();
    }
    return $this;
  });

[CTres]

I know that it has been ruled out on scope of project, but supporting image
upload would set this toolbar above and better than any other solution, and
creates a lightweight yet all in one solution that would be extremely
elegant.

On Monday, October 7, 2013, Dmitri Cherniak wrote:

I recently implemented something like this for fun as proof of concept.

The idea is, if you mouseover an empty p, you should show a link to click
to upload an image, and replace that p element with an img element with src
of the image you just uploaded.

Here's a bit of css, html, jquery goop that could inspire you. I used the
InkFilePicker to make the job easier and had a hidden element with id
"upload-image" that was in the same container element as ".editable". It' s
not perfect, but it's simple.

HTML

{% raw post_content.get("contents") if post_content.get("contents") else "" %}

add image

CSS

#upload-image {
display:none;
top:0;left:0;
}

JS

$(".editable").on("mouseover", "p", function(e){
var $this = $(this);
var $upload = $("#upload-image");
if ($this.text().trim().length == 0) {
$upload.css("left", $this.offset().left - 75);
$upload.css("top", $this.position().top + parseFloat($(this).css('marginTop'), 10) - 20);
$upload.off("click").on("click", function(event){
event.preventDefault();
filepicker.pickAndStore({
mimetypes: ["image/*"],
multiple: false,
services:["COMPUTER","URL","FLICKR", "INSTAGRAM", "DROPBOX", "FACEBOOK", "GMAIL"],
},{
path: '{{upload_path}}',
access: "public"
},
function(InkBlobs){
var InkBlob = InkBlobs[0];
console.log(InkBlob.url);
$this.after("")
$this.remove();
$upload.hide();
if (autoSave) {
saveAll();
}
},
function(FPError){

    });
  });
  $upload.show();
} else {
  $upload.hide();
}
return $this;

});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/29#issuecomment-25782747
.

Colin Treseler
[phone]
Twitter: @CTres
http://ctres.github.io
www.linkedin.com/in/ctres

[dmitric]

I very much disagree @CTres.

Where does the image get uploaded to? Is that a parameter? Do we need to then specify a protocol for the server side component? Do we need to specify a calIback to what happens after it's done and uploaded?

What happens if there's an error? Is selecting text a good UI/UX to start uploading an image? I don't think so, but what happens to the selected text if there is an upload button on the toolbar? There a lots of little details that require thought and abstraction to put into a framework. Try it out for yourself and I think you'll see.

[daviferreira]

That is great explanation, @dmitric, thanks 👍

I started playing on a different script for image uploads and also ended up using http://filepicker.io/, it works great. And yeah, is that simple to implement, but there are a lot of details to take care of.

[daviferreira]

Hey @orthes, that is awesome. Gonna add a link into the project' README. Cheers 🍻

[linkesch]

Thanks, @daviferreira. And even more thanks for MediumEditor itself. I love it!