Rails Javascript +资产管道

Question

对于资产管道（业余时间），我不太清楚自己在做什么。

我正在使用Froala编辑器（rails gem），当我访问要在所见即所得编辑器中呈现的页面时，意粉在页面上掉了下来。 （未应用JS。）

我已经尝试通过在on page:load init基础的调用旁边实现on page:load函数来解决rails turbolinks问题，但显然不起作用。

这是我当前的设置。

application.js:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require froala_editor.min.js
//= require turbolinks
//= require cocoon
//= require_tree .

$(function(){ $(document).foundation(); });

$(document).on('ready page:load', function () {   
  $('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})

这是表格本身：

wysiwyg post _form
<div class="field">
  <%= f.text_area :body, id: "wysiwyg" %>
</div>

这是我在新页面和编辑页面中正在做的事情：

new.html.erb (and edit)
<% content_for :head do %>
  <%= stylesheet_link_tag "froala_editor.min.css" %>
  <%= stylesheet_link_tag "froala_style.min.css" %>
  <%#= javascript_include_tag "froala_editor.min" %>
  ## commented out, tried both to no avail.
<% end %>

还尝试将我的froala_editor.min.js都包括在内， froala_editor.min.js均无济于事。 我到底在做什么错？

编辑 ：

Rails日志或开发控制台中没有错误或任何内容。

另外，当我刷新页面时，js可以正常工作，并且不再是“意大利面”，只是在初始页面加载时不起作用。

编辑两个 （“通用”是我的其他脚本所在的位置，每个@thedanotto）：

更新如下，但仍然没有运气。 仍适用于页面刷新。

//= require jquery
//= require jquery_ujs
//= require froala_editor.min.js
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require turbolinks
//= require foundation
//= require general
//= require cocoon
//= require_tree .

Answer 1

添加另一个js文件，并将其放在app/assets/javascripts/文件夹中。

将此代码从application.js移到new-js-file.js

$(function(){ $(document).foundation(); });

$(document).on('ready page:load', function () {   
  $('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})

然后，我也将froala_editor.min.js移到app/assets/javascripts/文件夹中。 并且只需确保您的froala_editor.min.js在字母表中的命名早于新文件的命名。 IE的新文件应以g或更高版本开头，以便随后将其加载到浏览器中。

否则，您可以将froala_editor.min.js添加到/public 。 然后将其加载到application.html.erb

Answer 2

事实证明，我并没有在树中正确要求Froala CSS文件。 我将其直接拉入视图中，但是当我将其添加到application.css中的列表中时，它可以正常工作。

 *= require scaffolds
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .