Ask A Question

Notifications

You’re not receiving notifications from this thread.

Adding Turbolinks Compatibility to SimpleMDE Markdown Editor Discussion

Jordano Moscoso Jordano Moscoso

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.

Reply

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!

Reply

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.

Reply

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/...

Reply

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

Reply

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...

Reply

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()

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 81,536+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.