Froala Editor JS / Проблемы с реализацией Rail: ключ не виден и ошибка просмотра кода - PullRequest
Новая
       13

Froala Editor JS / Проблемы с реализацией Rail: ключ не виден и ошибка просмотра кода

0 голосов
/ 25 октября 2018

Я пытаюсь заставить работать драгоценный камень Froala в моем приложении Rails 5.2, и у меня возникают две проблемы:

  1. Лицензионный ключ не распознается, поэтому, когда я смотрю на свойу живого сайта есть панель "нелицензионный редактор".(На рисунке показана сердитая красная полоса и десятки ошибок JS.) enter image description here

  2. Кнопка редактора кода заставляет второе текстовое поле появляться внутри первого, а неизменение исходного текста в представлении кода.Это только появляется на живом сайте (Heroku), но не происходит на localhost.Я подозреваю, что что-то не так с конвейером активов ...?enter image description here

Редактор выглядит так: 

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

Поддержка Froala была менее чем полезной, просто рекомендую мне посмотреть в своей консоли, чтобы проверить следующие два запроса: 

$.FE.VERSION
“2.8.5”

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

Кто-нибудь здесь получил это для работы с Rails?

1 Ответ

0 голосов
/ 05 ноября 2018

Мне тоже не удалось избавиться от нелицензионного бара!Но я нашел способ просто применить этот стиль: 

.fr-wrapper div:first-of-type {
  display: none;
}

Я надеюсь, что смогу помочь вам с вашей первой проблемой.

...