Froala编辑器JS/Rail实现问题:键不可见和代码视图错误

1. 许可证密钥未被识别,因此当我查看我的实时站点时,它有一个“未经许可的编辑器”栏(图为愤怒的红色条和无数的JS错误。)

2. localhost . 我怀疑资产管道有问题。。。?

<%= simple_form_for(@blog) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    ...
    <div class="form-group">
      <%= f.label :body %>
      <%= f.text_area :body, id: "wysiwyg" %>
    </div>
    ...
  </div>

  <div class="form-actions text-center">
    <%= f.button :submit, class: "btn-outline-primary" %>
  </div>
<% end %>

我的Froala实例的初始化页面上有以下内容:

<!-- script for FROALA-WYSIWYG -->
<script>
  $('#wysiwyg').froalaEditor({
    key: '<%= ENV['FROALA_ACTIVATION_KEY'] %>',
    inlineMode: false,
    heightMin: '200px',
    toolbarButtons: [
        'bold', 'italic', 'underline', 'paragraphFormat', 'formatOL',
        'formatUL', 'insertHTML', 'undo', 'redo', 'html'
      ]
  })
</script>

application.js.erb :

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require popper
//= require magnific-popup
//= require jquery-ui
//= require jquery-ui/widget
//= require jquery-ui/widgets/sortable
//= require rails-ujs
//= 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/font_size.min.js
//= require plugins/fullscreen.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/quote.min.js
//= require plugins/special_characters.min.js
//= require plugins/url.min.js

$('selector').froalaEditor({
  key: '<%= ENV['FROALA_ACTIVATION_KEY'] %>'
});

application.scss :

@import "bootstrap";
@import "font-awesome";
@import "trix";
@import 'bootstrap-datetimepicker';
@import "froala_editor.min";
@import "froala_style.min";
@import "font-awesome-sprockets";
@import "font-awesome";
@import 'plugins/char_counter.min.css';
@import 'plugins/code_view.min.css';
@import 'plugins/colors.min.css';
@import 'plugins/fullscreen.min.css';
@import 'plugins/image_manager.min.css';
@import 'plugins/image.min.css';
@import 'plugins/line_breaker.min.css';
@import 'plugins/quick_insert.min.css';
@import 'plugins/special_characters.min.css';
@import 'plugins/table.min.css';

以及推荐的宝石:

gem "wysiwyg-rails"
gem "font-awesome-sass"

我把钥匙列在我的房间里了 secrets.yml :

development:
  ...
  FROALA_ACTIVATION_KEY: *actual key here*

production:
  ...
  FROALA_ACTIVATION_KEY: <%= ENV["FROALA_ACTIVATION_KEY"] %>

还有我的 application.yml (为了安全起见):

FROALA_ACTIVATION_KEY: *actual key here*

$.FE.VERSION
“2.8.5”

$.FE.INSTANCES[0].opts.key
undefined