ckeditor 安装到使用

1.增加gem

gem 'carrierwave'
gem 'mini_magick'
gem 'ckeditor', '~> 4.2.4'

bundle

2 config/initializers/assets.rb

config/initializers/assets.rb:文件中加入

Rails.application.config.assets.precompile += %w( ckeditor/* )

3 app/assets/javascripts/application.js:

app/assets/javascripts/application.js:文件中加入

//= require ckeditor/init

4

rails generate ckeditor:install --orm=active_record --backend=carrierwave

# 执行上述命令会生成文件

xxx$ rails generate ckeditor:install --orm=active_record --backend=carrierwave
Running via Spring preloader in process 50883
      create  config/initializers/ckeditor.rb
       route  mount Ckeditor::Engine => '/ckeditor'
      create  app/models/ckeditor/asset.rb
      create  app/models/ckeditor/picture.rb
      create  app/models/ckeditor/attachment_file.rb
      create  app/uploaders/ckeditor_attachment_file_uploader.rb
      create  app/uploaders/ckeditor_picture_uploader.rb
      create  db/migrate/20190714121518_create_ckeditor_assets.rb

5 执行迁移

 rails db:migrate

6 config/intilizers/ckeditor.rb 文件中加入

config.assets_languages = ['en']
config.assets_plugins = ['image', 'smiley']

以上基本安装完成

---

若想在view页面使用

# 创建
<%= form.cktext_area :title %>

# index页面显示
<td><%= raw post.title %></td>

---

若想在activeadmin中引用

1. config/initilizers/active_admin.rb 文件中加入

config.register_javascript 'ckeditor/init.js'

2. 在需要的admin文件中引用，如下：

f.input :description, :as => :ckeditor

3. 修改富文本编辑器的格式

在文件assets/stylesheets/active_admin.scss 文件中修改，如下：

//= require activeadmin_addons/all
// require admin/noty
// require admin/animate

// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }
@import "active_skin";


############ 以下是样式修改

.cke_chrome {
  width: 79.5% !important;
  overflow: hidden;
}
#header h1.site_title {
  background-size: 70%;
  padding-left: 10px;
}


#course_desc_input 中的course是activeadmin对应的model名
course_desc_input {   
  background-color: #f8f8f8;
  label {
    width: 20%;
  }
}

4.报错整理

1.couldn't find file 'ckeditor/init'
解决方法
gem 'ckeditor', '~> 4.2.4'