Rails - Froala Editor-Plugins werden beim ersten Laden der Seite nicht geladen. Wie lade ich die Plugins, bevor ich den Editor initialisiere?

Question

Ich habe froala Editor auf meiner Schiene 4.2 App installiert. Ich verwende das Juwel nicht, weil ich der Symbolleiste zusätzliche benutzerdefinierte Schaltflächen hinzugefügt habe. Ich habe alle froala-Dateien in/public/froala (ich weiß, es ist nicht die beste Praxis, aber es ist immer noch leicht zu aktualisieren und es ist der einzige Weg, wie ich die benutzerdefinierten Tasten zum Arbeiten bringen konnte).

Ich habe die Toolbar Standardeinstellungen wie so

jQuery -> 
      $('#edit').froalaEditor({ 
      toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'], 
      imageResizeWithPercent: true, 
      imageDefaultWidth: 70, 
      imageInsertButtons: ['imageByURL'] 

Aber ich habe ein Problem. Die Symbolleiste hat nicht die richtigen Schaltflächen, wenn ich die Seite lade. Erst nachdem ich die Seite aktualisiert habe, werden die von mir eingestellten Schaltflächen angezeigt. Ich fragte ihre Unterstützung und zeigte ihnen ein Video und sie sagten mir, dass ich die Plugins nicht geladen habe, wenn ich die Seite zum ersten Mal lade. Sie sagten, um sicherzustellen, dass ich die Plugins vor der Initialisierung des Editors laden.

Wie kann ich das schaffen?

Answer 1

Für jeden anderen, der das gleiche Problem hat, trubolinks, die es verursacht. Ich habe Turbolinks deaktiviert und das Problem wurde gelöst.

Answer 2

In Ihrem Gemfile

gem 'wysiwyg-rails' 

In application.css

/* 
*= require froala_editor.min.css 
*= require froala_style.min.css 
*= require font-awesome 
*= require plugins/code_view.min.css 
*= require plugins/draggable.min.css 
*= require plugins/file.min.css 
*= require plugins/table.min.css 
*= require plugins/video.min.css 
*= require plugins/colors.min.css 
*= require plugins/image.min.css 
*= require plugins/image_manager.min.css 
*= require plugins/line_breaker.min.css 
*= require plugins/quick_insert.min.css 
*/ 

In application.js

//= require froala_editor.min.js 
//= require plugins/align.min.js 
//= require plugins/code_beautifier.min.js 
//= require plugins/code_view.min.js 
//= require plugins/draggable.min.js 
//= require plugins/entities.min.js 
//= require plugins/file.min.js 
//= require plugins/font_size.min.js 
//= require plugins/font_family.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/quick_insert.min.js 
//= require plugins/table.min.js 
//= require plugins/video.min.js 
//= require plugins/colors.min.js 
//= require plugins/quote.min.js 

Die n versuchen Sie Ihren Code

Hoffe, dass dies für Sie arbeiten wird.

Answer 3

Nach meiner Einschätzung haben Sie ein Problem beim ersten Laden der Seite jQuery laden. Bitte stellen Sie sicher, dass Sie in

Gemfile

gem 'wysiwyg-rails' 
gem 'jquery-rails' 

application.js

//= require jquery 

sicherstellen, erfordern jQuery ist vor //= require_tree . auch alle Plug-Ins vor Baum sein. Folgendes ist meine vollständige Liste von erfordert und es funktioniert vollständig.