Froala v2 migration

[goraccio]

Froala updated their plugin and changed some functions:

In version 2 we have renamed the plugin from $.Editable to $.FroalaEditor to make it more suggestive and avoid any name conflict. Therefore, when initializing the editor or calling a method inside the editor, froalaEditor() method should be used instead of editable()

Please, fix this in file /app/assets/javascripts/rails_admin/ra.widgets.coffee on line 239 $(@).editable(config_options) need to be changed to $(@).froalaEditor(config_options)

And also all "$(@).on 'editable" should be changed to "$(@).on 'froalaEditor" Events was also changed.

[nicovak]

If we do the migration now, we 'll have a BC BREAK. You have many other things to change, I just did the migration yesterday, here is an example of my ra.widget.coffee: (the required js and css also changed)

Done with the official migration guide

I corrected the fact that the code don't allow more parameters in the field config. config_options['imageUploadParams'] was erased when the code set the authenticity_token. I also corrected some others things...

I tried almost all behaviors and all worked well. (Image upload, image manager, file etc). I plan to add some example in the wiki.

goFroalaWysiwygs = (array) =>
  array.each ->
    options = $(@).data('options')
    config_options = $.parseJSON(options['config_options'])
    if config_options
      config_options['imageUploadParams'].authenticity_token = $('meta[name=csrf-token]').attr('content');
      config_options['imageManagerLoadParams'].authenticity_token = $('meta[name=csrf-token]').attr('content');
      if !config_options['toolbarInline']
        config_options['toolbarInline'] = false
    else
      config_options = {toolbarInline: false}

    if config_options['imageUploadURL']
      uploadEnabled = true;

    $(@).addClass('froala-wysiwyged')
    $(@).froalaEditor(config_options)
    if uploadEnabled
      $(@).on 'froalaEditor.imageError', (e, editor, error) ->
        alert("error uploading image: " + error.message);
        # Custom error message returned from the server.
        if error.code == 0

# Bad link.
        else if error.code == 1

# No link in upload response.
        else if error.code == 2

# Error during image upload.
        else if error.code == 3

# Parsing response failed.
        else if error.code == 4

# Image too large.
        else if error.code == 5

# Invalid image type.
        else if error.code == 6

# Image can be uploaded only to same domain in IE 8 and IE 9.
        else if error.code == 7

        else

        return

      .on('froalaEditor.image.removed', (e, editor, $img) ->
# Set the image source to the image delete params.
        editor.options.imageDeleteParams =
          src: $img.attr('src')
          authenticity_token: $('meta[name=csrf-token]').attr('content')
        # Make the delete request.
        editor.deleteImage $img
        return
      ).on('froalaEditor.imageDeleteSuccess', (e, editor, data) ->
# handle success
      ).on 'froalaEditor.imageDeleteError', (e, editor, error) ->
# handle error
        alert("error deleting image: " + error.message);

array = content.find('[data-richtext=froala-wysiwyg]').not('.froala-wysiwyged')
if array.length
  options = $(array[0]).data('options')
  if not $.isFunction($.fn.froalaEditor)
    $('head').append('<link href="' + options['csspath'] + '" rel="stylesheet" media="all" type="text\/css">')
    $.getScript options['jspath'], (script, textStatus, jqXHR) =>
      goFroalaWysiwygs(array)
  else
    goFroalaWysiwygs(array)

[walidvb]

What about leaving both options, and having it as a configuration?

[nicovak]

I think you must have a delimiter between v1 and v2 there are so many changes between both versions. The actual version is broken (see my notes) It doesnt allow image upload and stuff like that. Changing options will maybe break old projets if they upgrade the admin gem. (editable vs froalaEditor method). Ideally we should have a config option "version" set to 1 by default for model config.

If you want you can check my rails sandbox to see a working implementation

Exemple of model config: https://github.com/rollincode/rollinbox/blob/master/app/models/concerns/rails_admin/content_admin.rb

Exemple of controller for froala: https://github.com/rollincode/rollinbox/blob/master/app/controllers/froala_controller.rb

I can put It on heroku if anyone is interested to see my theme and froala working together.

[ehoch]

Pinging to see if there's been any progress / decision on supporting v2..

[qx]

....help to see support v2..+1

[Goltergaul]

+1

[gunnar2k]

+1

[gunnar2k]

Thanks @nicovak I just forked rails_admin and edited the ra.widgets.coffee file and this seems to work great at a first glance.

[romikoops]

+1

[gabrieletassoni]

Me too I'd like to have this merged, using wysiwyg-rails (2.8.0) with rails_admin (1.3.0), I managed to make it work by putting, as an horrible hack, in ui.js
$('textarea[data-richtext="froala-wysiwyg"').froalaEditor(); so that it could be loaded for the froala textareas in new or edit page. But this won't work for content loaded via javascript such as modals for Edit or New association and for nested forms.