1

我无法完全弄清楚我在资产管道（业余时间）方面做错了什么。

我正在使用 Froala 编辑器（rails gem），当我访问要在我的所见即所得编辑器中呈现的页面时，它是意大利面条掉在页面上。（JS没有被应用。）

我试图通过on page:load在调用 init 基础之外实现该函数来解决 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两种方法都无济于事。我到底做错了什么？

编辑：

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 .
4

2 回答 2

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 您的新文件应该以 ag或更高版本开始，以便之后在浏览器中加载。

否则，您可以添加 froala_editor.min.js到/public. 然后在里面加载application.html.erb

于 2015-08-14T23:15:47.863 回答
0

It turns out I had not required the Froala CSS files properly in the tree. I was pulling it in directly in the view but when I added it to the list in application.css it worked. 

 *= require scaffolds
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
于 2015-08-15T19:16:58.167 回答