bergie / hallo

Simple rich text editor (contentEditable) for jQuery UI

Home Page:http://hallojs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

halloimage plugin not working

ericmittelhammer opened this issue · comments

See this example: http://jsfiddle.net/WpKm2/
The "Insert Images" dialog is empty when activated. Same results in FF and Chrome

+1 this

I'm pretty sure you need to add some options for the image plugin to work or even be populated with anything (this plugin definitely needs some documentation or something). For example, take a look at this example: http://jsfiddle.net/WpKm2/2/

If you click on "Search" or "Upload", the dialog box should be populated.

I understand that in order to use images plugin, I need to specify searchUrl and uploadUrl. Could anyone advise me, what data should these URLs take and return?

'halloimage' : {
  'searchUrl' : '/find/images',
  'uploadUrl' : '/upload/process'
}

Searching

The searchUrl will receive a HTTP get with three URL parameters:

  • q containing the query text
  • limit and offset for paging the results

The returned data should be a JSON object containing a assets key with the images.

In addition it should contain keys offset containing the offset used in that query and total telling the total, non-paged amount of pictures.

Each image returned by the search should be an object with keys:

  • url pointing to the image
  • alt image ALT text
  • label image description (optional)

This default search functionality can be replaced by providing a searchCallback function instead of searchUrl.

Uploading

The uploadUrl will receive by a multi-part HTTP POST with the following fields:

  • userfile containing the image
  • tags containint tags to associate with the image (by default, tags of the entity the image is uploaded to), if any
  • caption containing the image title

After receiving the POST, the upload URL endpoint should redirect the window to the final URL of the uploaded picture.

The default upload functionality can be replaced by providing a uploadCallback function instead of uploadUrl.

The current code doesn't work because grunt doesn't include the plugins/image folder for js generation.

Using this:
https://github.com/grobmeier/hallo/commit/4beb85daea23a6e01e39214ffabc66de45dd0d71

does fix the behavior. Unfortunately I already have an open pull request, which means i can't send a new one (...). Please change it to the way you like it, this is my first dive with grunt and coffeescript

Thanks for the documentation here @bergie. I was able to get it up and running with this -- the one thing I haven't gotten working yet is actually dragging the image over to my editable region... =T. This post would be a great candidate for a wiki article on how to use halloimage. I love hallo's simplicity, but you have to do a bit of digging unfortunately to get to some docs on it.

And @grobmeier, I believe you can have multiple open pull requests if put them on separate branches.

@matthauck Thanks mate. I have learned that actually - but to late.

can someone post an example. So after the uploadurl call a post method and I have the method return a string which is the directory path of the image. How do I set the source of the img to the return string? Right now, the img source is still the url for the post method after the method is called.

+1 for better documentation on this feature.
I have managed to get the image upload box to be populated, even displays the uploaded image after clickeing the upload button. Is there something else i need to set-up so that it then inserts the uploaded image into the content? i am using markdown, modelled after the hallojs markdown demo here but so far have not been able to successfully insert the image into the content (at the cursor ideally)