Skip to main content

Subscribe to GoRails to get access to this episode and all other pro episodes, and new awesome content every month.

Subscribe Now
Only $19/month

Unlimited access. Cancel anytime.

11 Adding Turbolinks Compatibility to SimpleMDE Markdown Editor

Episode 152 · November 14, 2016

Learn how to use Javascript constructors and destructors with Turbolinks to add compatilibty to any Javascript library you want

Turbolinks Javascript Frontend


Transcripts

Subscribe or login to view the transcript for this episode.

Discussion


Gravatar
Jordano Moscoso on

I prefer to remove turbolinks because libraries dont work nice with it, but would be great to know how to make them all compatible with turbolinks.


Gravatar
Nick McNeany (6,730 XP) on

Great episode, thanks Chris!

I've been struggling with Front-end frameworks, like Bootstrap and others. The JavaScript components only work on initial page load (or after a page refresh).

I've tried using jQuery turbolinks, but never seems to help. Would love to hear your approach on how to get around this.

Thanks again!

Gravatar
Chris Oliver (159,850 XP) on

The simple solution for most of Bootstrap is just to use the turbolinks:load event for re-initializing your JS. For example, to enable tooltips and popovers for all pages, you can do:

$(document).on 'turbolinks:load', ->
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()

Some of the other things like bootstrap modals don't need this because the JS is written in a way that makes it automatically compatible from what I've seen. Bootstrap 3 doesn't have too many compatibility issues with Turbolinks 5 these days.

Gravatar
Nick McNeany (6,730 XP) on

Got it, makes sense! Thanks, Chris!

Also, I'm loving the new look and features!

Gravatar
Chris Oliver (159,850 XP) on

More stuff coming soon! :D


Gravatar
Zulhilmi Zainudin (260 XP) on

Thanks Chris for this video.

Would you mind to cover how to upload images to SimpleMDE like in WordPress editor?

Example:

Browse photo(s) -> the photo(s) get displayed directly on the text editor.

Thank you!

Example screenshot:
http://cdn4.wpbeginner.com/...


Gravatar
Larry Qu (2,650 XP) on

Thank you Chris!
I wish a complete video about how to Integrate simplemde and rails。


Gravatar
spaquet on

For those of you using CKEditor the trick is a little bit more complicated.
I would recommend reading Gambala comment for Turbolink 5 (near the bottom): https://github.com/galetahu...


Gravatar
wokenqingtian (10 XP) on

better write your updating here
https://gorails.com/forum/s...

simplemde = null

cleanupSimpleMDE = ->
if simplemde?
simplemde.toTextArea()
simplemde = null

$(window).on 'popstate', cleanupSimpleMDE
$(document).on 'turbolinks:before-visit', cleanupSimpleMDE

$(document).on "turbolinks:load", ->
simplemde = new SimpleMDE()


Login or create an account to join the conversation.