PerfectlyNormal / tinymce-rails-imageupload

Image upload plugin for TinyMCE and Rails with the asset pipeline
MIT License
149 stars 153 forks source link

Insert button doesn't work #17

Closed nfriend21 closed 11 years ago

nfriend21 commented 11 years ago

Im clicking on the insert button to start uploading the image, but nothing happens. Am I missing something?

Is there somewhere I can see an example of a setup Controller? Sorry, I followed the instructions but this part was quite unclear for a newbie...

PerfectlyNormal commented 11 years ago

Depends on what you expected to happen. As noted in #2, there is no upload progress being shown, so it might appear to do nothing if the image is big, or the server is slow, or a combination.

This is my controller that is being used in production and works fine. It's a weird mix of GridFS from MongoDB and Paperclip for easy geometry and other files, so it might not look all that nice.

Just let me know if there is anything else you are struggling with, and I'll do my best to assist.

class TinymceAssetsController < ApplicationController
  respond_to :json

  def create
    authorize! :create, TinymceAsset # Use CanCan for authorization

    geometry     = Paperclip::Geometry.from_file params[:file]
    image        = TinymceAsset.new
    image.file   = params[:file]
    image.width  = geometry.width.to_i
    image.height = geometry.height.to_i
    image.save!

    render json: {
      image: {
        url:    view_context.gridfs_url(image.file),
        height: image.height,
        width:  image.width
      }
    }, layout: false, content_type: "text/html"
  end
end

The associated model:

class TinymceAsset
  include MongoMapper::Document
  plugin Joint

  attachment :file
  key :width,  Integer
  key :height, Integer
end

And for the routing, I have this line in my routes.rb: post '/tinymce_assets' => 'tinymce_assets#create'

nfriend21 commented 11 years ago

I guess the part that is unclear is the controller/model aspect. The instructions dont really explain how this part should be done (or the easiest way to do so). Obviously, these files need to be saved somewhere so some sort of migration needs to take place and then the model/controller need to be set up to communicate with TinyMCE.

Can you point me toward a tutorial perhaps?

PerfectlyNormal commented 11 years ago

Yeah, it assumes you are familiar with Rails and able to set up that bit yourself.

Mostly the gem does just what I needed, and then attempted to generalize and extend so it can be useful to others.

I'll see if I can't type up a more detailed guide tomorrow.

On 13 sep 2012, at 11:47 em, nfriend21 notifications@github.com wrote:

I guess the part that is unclear is the controller/model aspect. The instructions dont really explain how this part should be done (or the easiest way to do so). Obviously, these files need to be saved somewhere so some sort of migration needs to take place and then the model/controller need to be set up to communicate with TinyMCE.

Can you point me toward a tutorial perhaps?

— Reply to this email directly or view it on GitHub.

nfriend21 commented 11 years ago

you might not even have to go that far...if you can show a working controller, model, form, etc. then a newbie like me can see all the code to make it work, and then figure out how to get it done. Im particularly confused on how to make them all connect.

PerfectlyNormal commented 11 years ago

Hi. I'm sorry, but I totally forgot to reply. Was so sure I had done it, but turns out I just started writing and then forgot about the tab.

Working controller, model and route is posted above, (one of) my form(s) look like this (using Haml, jQuery and simple_form):

= simple_form_for @entry do |f|
  ...
  = f.input :body, input_html: { rel: :tinymce }
  ...
  = f.submit

:javascript
    opts = {
        theme: "advanced",
        theme_advanced_buttons1: "bold,italic,underline,separator,bullist,numlist,separator,undo,redo,separator,uploadimage",
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "none",
        plugins: "uploadimage",
        relative_urls: false
      };
    $("[rel=tinymce]").each(function(index, el) {
      $(el).tinymce(opts);
    });

Might have made a small syntax error or similar when copy-pasting now, but you should get the general idea… If not, let me know what you are having trouble with, and possibly some code to look at, and I'll see if I can't help you with the rest.

PerfectlyNormal commented 11 years ago

Did you get this working?

nfriend21 commented 11 years ago

I did yes, thank you.

PerfectlyNormal commented 11 years ago

Good to hear :)