Ruby on rails Rails-Froala编辑器插件是'；当我第一次加载页面时，如何在初始化编辑器之前加载插件？

我已经在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']

但我有一个问题。加载页面时，工具栏没有显示正确的按钮，只有在刷新页面一次后，才会显示我设置的按钮。我请求他们的支持，给他们看了一段视频，他们告诉我，我第一次加载页面时没有加载插件。他们说要确保在初始化编辑器之前加载插件

---

我怎样才能做到这一点呢？

在您的GEM文件中

gem 'wysiwyg-rails'

gem 'wysiwyg-rails'
gem 'jquery-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
*/

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

//= require jquery

在application.js中

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

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

//= require 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']
});

---

希望这对您有用。

据我估计，在最初加载页面时加载jQuery会有问题。请确保你有足够的时间

Gemfile

gem 'wysiwyg-rails'

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

application.js

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

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

//= require jquery

确保requirejquery位于require\u树之前。所有插件也必须位于require\u树之前。以下是我的全部需求列表，它完全有效

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

---

对于任何其他有相同问题的人来说，它的trubolinks就是导致它的原因。我禁用了turbolink，问题得到了解决。

您是否尝试将“数据无turbolink”添加到指向编辑器的链接中

=link_要编辑_post_路径（post），数据：{no_turbolink:true}

无法解决此问题暂时完全禁用turbolinks以查看问题是否由它们引起。有关如何操作，请参见，例如，您是否正在使用他们的宝石？如果是这样，您是否已将插件文件添加到您的

application.js

和

application.css

中，如图所示？很抱歉打扰您，您的

.froalaEditor

初始化从未关闭，我无法仅为

>创建和编辑建议）