Rails - 我第一次加載頁面時沒有加載Froala編輯器插件，如何在初始化編輯器之前加載插件？

Question

我在我的rails 4.2應用程序上安裝了froala編輯器。 我沒有使用gem，因為我在工具欄中添加了額外的自定義按鈕。 我在/ public / froala中有所有froala文件（知道它不是最佳實踐，但它仍然很容易以這種方式更新，這是我可以讓自定義按鈕工作的唯一方法）。

我已經設置了工具欄默認值

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']

但我有一個問題。 當我加載頁面時，工具欄沒有顯示正確的按鈕，只有在我刷新頁面后，我設置的按鈕才會顯示。 我問他們的支持並向他們展示了一個視頻，他們告訴我，當我第一次加載頁面時，我沒有加載插件。 他們說要確保在初始化編輯器之前加載插件。

我該怎么做呢？

Answer 1

在你的Gemfile中

gem 'wysiwyg-rails'

在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
*/

在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

然后嘗試你的代碼

$('#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']
});

希望這對你有用。

Answer 2

對於其他任何有相同問題的人來說，它的trubolink就是造成它的。 我禁用了turbolinks，問題解決了。

Answer 3

根據我的估計，在初始加載頁面時加載jQuery會出現問題。 請確保你有

的Gemfile

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

的application.js

//= require jquery

確保在//= require_tree .之前需要jQuery //= require_tree . 所有插件都必須在樹之前。 以下是我的完整需求清單，它完全有效。

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