froalaのgemを導入したいが、editorが表示されません

Question

こんにちは。現在froalaのgem導入を試みております。

現状以下のように設定を行なったのですが、editorがどうしても表示されずに困っております。

#リッチエディタ
gem 'wysiwyg-rails'
gem "font-awesome-rails"

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

//= 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/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.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/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
//= require languages/ja.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

      tr#book_content
        td = text_area :post, :body
      tr
        td = f.submit '投稿する'

script
  |  $(function() { $('#book_content').froalaEditor(); });

不足点等あればご教示頂けないでしょうか？

よろしくお願い致します。

追記

GET https://ajax.googleapis.com/js/jquery-3.3.1/slim.min.js net::ERR_ABORTED 404
new:6 Uncaught SyntaxError: Unexpected token '|'
new:6 Uncaught ReferenceError: ga is not defined
    at new:6
(anonymous) @ new:6
new:8 Uncaught TypeError: $(...).froalaEditor is not a function
    at HTMLDocument.<anonymous> (new:8)
    at fire (application-4bb4d762495fea963a1185da54338e552fb6203d9890a43a64ce8ed7f3ced867.js:6010)
    at Object.fireWith [as resolveWith] (application-4bb4d762495fea963a1185da54338e552fb6203d9890a43a64ce8ed7f3ced867.js:6140)
    at Function.ready (application-4bb4d762495fea963a1185da54338e552fb6203d9890a43a64ce8ed7f3ced867.js:6360)
    at HTMLDocument.completed (application-4bb4d762495fea963a1185da54338e552fb6203d9890a43a64ce8ed7f3ced867.js:6395)

Comments

[gouf]

ページそのものは Rails からのエラー表示なく描画されていますか? Web ブラウザの開発者コンソールになにかエラーは出力されていますか?

[KOO_]

ありがとうございます。
追記に記載のエラーがわかりましたが、どう対処すれば良いでしょうか？

[gouf]

3点、きになったことがありました :

* 公式ドキュメントでの初期化の方法 ( https://froala.com/wysiwyg-editor/docs/overview/ ) は「var editor = new FroalaEditor('#example')」と書かれていますが、(現在エラーが出ている) 「$(...).froalaEditor」という書き方もあるのですか?
* 現在提示いただいている情報の限りでは、jQuery の読み込み処理が定義されていないようですが、どこか別の場所で読み込みはされていますか?
* 「SyntaxError: Unexpected token '|'」とエラーが出ていますが、テンプレートエンジンの記法に誤りはありませんか? (Slim や Haml などを使われているのですか?)

[KOO_]

ありがとうございます！サイトを参考にしてやっと出来ました！ありがとうございます。

[gouf]

解決した場合、他者の回答ないし自己回答として内容をまとめて それをベストアンサーに設定することで、この質問を解決済みにすることができます