FroalaEditorが使えない

Question

RailsでFroalaを導入してエディタ風のtextFieldを作ろうとしているんですが

のエラーとfroalaが反映されず質問させていただきます。

ご教授お願いします。。。(T ^ T)

application.js

//= require jquery3
//= require jquery-ui
//= require rails-ujs
//= require jquery.oembed
//= require activestorage
//= require turbolinks

//= 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/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.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 languages/ja.js

//= require_tree .

application.css


 *= 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/line_breaker.min.css
 *= require plugins/quick_insert.min.css
 *= require plugins/table.min.css

 *= require_tree .
 *= require_self
 */

application.html head内

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

_form.html.erb

  <tr>
    <th scope="row">記事1</th>
     <td><%= f.text_area :text_1 , :id => "article_content_1"%></td>
  </tr>

<script>
  $(function() { 
  $('#article_content_1').froalaEditor({
    language: 'ja',
    height:100,
    linkAlwaysBlank: true,
    tableEditButtons: ['tableRows']
  });
  });
</script>

gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.4.4', '< 0.6.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'pry-rails'
  gem 'pry-byebug'
  gem 'pry-doc'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'letter_opener'
  gem 'letter_opener_web'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'carrierwave'
gem 'rmagick', '~> 3.0.0'
gem 'kaminari'
gem 'jquery-rails' 
gem 'jquery-ui-rails'
gem 'devise'
gem 'meta-tags'
gem 'sitemap_generator'
gem 'wysiwyg-rails'
gem "font-awesome-rails"
gem 'rinku'
gem 'jquery-oembed-rails', '~> 0.2.0'
gem 'rails_12factor', group: :production
gem 'fog-aws'


group :deployment do
  gem 'sshkit', '>= 1.9.0'
  gem 'sshkit-sudo', '~> 0.1.0', require: false
  gem 'capistrano', require: false
  gem 'capistrano-rbenv', github: "capistrano/rbenv", require: false
  gem 'capistrano-secrets-yml'
  gem 'capistrano-rails', require: false
  gem 'capistrano-rvm', require: false
  gem 'capistrano-bundler', require: false
  gem 'capistrano3-puma', require: false
  gem 'capistrano-faster-assets'
  gem 'capistrano-rails-console'
  gem 'rvm-capistrano'
  gem 'capistrano-yarn'
  gem 'capistrano-sidekiq', github: 'seuros/capistrano-sidekiq'
end

Answer 1

$(function() {
  new FroalaEditor('#article_content_1');
});

こちらに書き換えて、うまくいきませんでしょうか？

Comments

[nnnn5]

だめでした。回答ありがとうございました！