4

I have froala editor installed on my rails 4.2 app. I'm not using the gem because I have added extra custom buttons to the toolbar. I have all the froala files in /public/froala (know its not best practice but its still easy to update this way and its the only way I could get the custom buttons to work).

I have set the toolbar defaults like so

jQuery ->
          $('#edit').froalaEditor({
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
            imageResizeWithPercent: true,
            imageDefaultWidth: 70,
            imageInsertButtons: ['imageByURL']

But I have one problem. The toolbar doesnt have the right buttons displayed when I load the page, only after I refresh the page once does the buttons I set display. I asked their support and showed them a video and they told me I don't have the plugins loaded when I first load the page. They said to make sure I load the plugins before initializing the editor.

How can I get that done?

Rob
  • 1,835
  • 2
  • 25
  • 53
  • Have you tried to add 'data-no-turbolink' to link which refers to editor? `= link_to edit_post_path(post), data: { no_turbolink: true }` – user1201917 Jun 27 '16 at 12:13
  • Doesn't fix the problem – Rob Jun 27 '16 at 23:28
  • temporarily disable turbolinks altogether to see if the issue is caused by them or not. For how to do it see e.g. http://blog.flightswithfriends.com/post/53943440505/how-to-disable-turbolinks-in-rails-4 – igneus Jun 29 '16 at 13:15
  • Are you using their gem? If so, have you added the plugin files to you `application.js` and `application.css` as shown here? – Jawad Khawaja Jun 30 '16 at 07:54

3 Answers3

1

In your Gemfile

gem 'wysiwyg-rails'

In application.css

/*
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome
 *= require plugins/code_view.min.css
 *= require plugins/draggable.min.css
 *= require plugins/file.min.css
 *= require plugins/table.min.css
 *= require plugins/video.min.css
 *= require plugins/colors.min.css
 *= require plugins/image.min.css
 *= require plugins/image_manager.min.css
 *= require plugins/line_breaker.min.css
 *= require plugins/quick_insert.min.css
*/

In application.js

//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/draggable.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_size.min.js
//= require plugins/font_family.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/table.min.js
//= require plugins/video.min.js
//= require plugins/colors.min.js
//= require plugins/quote.min.js

Then try your code 

$('#edit').froalaEditor({
            toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
            imageResizeWithPercent: true,
            imageDefaultWidth: 70,
            imageInsertButtons: ['imageByURL']
});

Hope this will work for you.

Akshay Borade
  • 2,442
  • 12
  • 26
1

For anyone else that has the same problem its trubolinks that is causing it. I disabled turbolinks and the problem was solved.

Rob
  • 1,835
  • 2
  • 25
  • 53
0

By my estimation you have an issue loading jQuery on initial load of the page. Please make sure you have in

Gemfile

gem 'wysiwyg-rails'
gem 'jquery-rails'

application.js

//= require jquery

make sure require jQuery is before //= require_tree . also all plug ins have to be before tree. Following is my full list of requires and it works fully.

//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require twitter/bootstrap
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/entities.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require turbolinks
//= require_tree .
Artem Ankudovich
  • 458
  • 2
  • 14