Rails - 当我首次加载页面时，Froala编辑器插件没有加载，如何在初始化编辑器之前加载插件？

Question

我在我的Rails 4.2应用程序中安装了Froala编辑器。我没有使用gem，因为我已经向工具栏添加了额外的自定义按钮。我将所有的Froala文件放在/public/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']

但我有一个问题。当我加载页面时，工具栏没有显示正确的按钮，只有在刷新一次页面后才会显示我设置的按钮。我向他们的支持团队询问并展示了一个视频，他们告诉我在第一次加载页面时我没有加载插件。他们建议确保在初始化编辑器之前加载插件。

我该如何做到这点？

- Rob

---

你尝试过在指向编辑器的链接中添加 'data-no-turbolink' 吗？= link_to edit_post_path(post), data: { no_turbolink: true } - user1201917

不解决问题。 - Rob

临时禁用 TurboLinks 以查看问题是否由它们引起。如何操作请参见 http://blog.flightswithfriends.com/post/53943440505/how-to-disable-turbolinks-in-rails-4 - igneus

你是否在使用他们的gem？如果是，你是否已经像这里所示一样将插件文件添加到你的application.js和application.css中了？ - Jawad Khawaja

Answer 1

如果其他人也遇到同样的问题，那么原因是trubolinks。我禁用了turbolinks，问题得以解决。

- Rob

Answer 2

在你的 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']
});

希望这对你有用。

- Akshay Borade

---

抱歉打扰您，但是您的.froalaEditor初始化从未关闭，我无法为});创建和编辑建议。 - Artem Ankudovich

Answer 3

根据我的估计，您在页面初始加载时存在jQuery加载问题。请确保您已经在Gemfile中添加了相关内容。

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

application.js

//= require jquery

请确保在//= require_tree .之前引入了jQuery，同时所有的插件都要在树形结构（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 .

- Artem Ankudovich