spohlenz / tinymce-rails

Integration of TinyMCE with the Rails asset pipeline
Other
813 stars 256 forks source link

Rails 5 support? #213

Closed JorgeDDW closed 7 years ago

JorgeDDW commented 7 years ago

I've install it on a Rails 5 project, is working okey for now.

And found an issue, when I click on a doc or note, the toolbar is not loading, if i refresh the site then the toolbar is show up.

simmerz commented 7 years ago

Right now, it doesn't play well with Turbolinks. I've done the following in the short term (doesn't use the config file), but really this needs to be built back into the gem's asset pipeline. I also don't bother checking whether turbolinks is defined, because I know I'm using it:

$(document).on 'turbolinks:load', ->
  (->
    if typeof tinyMCE != 'undefined'
      tinyMCE.init
        selector: 'textarea.tinymce'
        plugins: 'uploadimage link'
        toolbar: 'undo redo | styleselect | bold italic | link uploadimage'
    else
      setTimeout arguments.callee, 50
  )()

$(document).on 'turbolinks:request-end', ->
  tinyMCE.remove() if tinyMCE
simmerz commented 7 years ago

Further to the above, you basically want to do something like for instances where Turbolinks isn't available, or isn't supported.

tinyMCEInit = ->
  (->
    if typeof tinyMCE != 'undefined'
      tinyMCE.init
        selector: 'textarea.tinymce'
        plugins: 'uploadimage link'
        toolbar: 'undo redo | styleselect | bold italic | link uploadimage'
    else
      setTimeout arguments.callee, 50
  )()

if typeof Turbolinks != 'undefined' and Turbolinks.supported
  $(document).on 'turbolinks:load', ->
    tinyMCEInit()

  $(document).on 'turbolinks:request-end', ->
    tinyMCE.remove() if tinyMCE
else
  tinyMCEInit()
spohlenz commented 7 years ago

Thank you @simmerz. I definitely like that approach -- I will do some further testing and hopefully add something similar in the next release.

spohlenz commented 7 years ago

Turbolinks compatibility should be greatly improved in the 4.5.3 release.

jemagee commented 7 years ago

I am experimenting with a basic rails new install, and got tinymce/prism working together, but the turbolinks thing is still an issue (even if I bundle directly from this repository), it works great but I have to reload it to get it to work properly, not sure if it's still an issue, or i'm doing something wrong, but like I said, basic rails install, following this repositories instructions for tinymce and prism gem instructions so I can use codesample

spohlenz commented 7 years ago

@jemagee The main gotcha I found with Turbolinks was to make sure you are including the JavaScript (either in your application.js or using tinymce_assets from within your document HEAD.

If that doesn't solve it, could you please share a sample repo with your application and I'll take a look.

jemagee commented 7 years ago

@spohlenz Right now I've been using the basic <%= tinymce %> to get it going. I do consider myself an 'intermediate beginner' as I can do more than crud, but including it in application.js might be a bit beyond me right now. I have no problem turning off turbolinks, as many people suggest it, to get it going, the tinymce_assets thing is also beyond me right now, but I will try to look at both options going forward (after I get the importcss thing solved so I can implement this awesome gem into my blog, and thank goodness for the relatively new prism gem, works like a charm together)

spohlenz commented 7 years ago

@jemagee Can you past some excerpts from your code for a) where you are calling the tinymce helper, and b) where and how you are including the TinyMCE assets (from step 3 in the README)?

jemagee commented 7 years ago

Alright - let's see if i can do this right.

My config/tinymce.yml looks like this - in its most basic form

toolbar: 
  - styleselect | bold italic | undo redo | format
  - image | link | codesample
plugins:
  - image
  - codesample
  - link
  - importcss

in application.js I have //= require tinymce-jquery

my application.scss file has @import 'prism';

And my basic form code calling tinymce is

    <%= f.text_area :body, id: "tinymce", class: "tinymce", rows: 40, cols: 120 %>
    <%= tinymce %>

As I said, I tried to get importcss to get my application.css included somehow, but I could not get it to work.