Question

I can't quite figure out what I'm doing wrong with respect to my asset pipeline (amateur hour).

I'm using the Froala editor (rails gem) and when I visit the page where I want to render in my wysiwyg editor, it's spaghetti falling out over the page. (The JS isn't being applied.)

I've tried to account for the rails turbolinks issue by implementing the on page:load function beside call to init foundation, but it obviously doesn't work.

Here's my current setup.

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})
})

Here's the form itself:

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

Here's what I'm doing in the new and edit pages:

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 %>

Also tried including my froala_editor.min.js both ways to no avail. What the heck am I doing wrong?

Edit:

No errors or anything in the rails log or dev console.

Also, when I refresh the page, the js does work and it's no longer "spaghetti," just not on initial page load.

Edit two ("general" is where my miscellaneous scripts are, per @thedanotto):

Updated as follows but still no luck. Still works on page refresh.

//= 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你的新文件应该以{{1}}或更高版本开头，以便之后在浏览器中加载。

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

中

Rails Javascripts + Asset Pipeline

1 个答案: