给Rails博客网站加上富文本编辑器Simditor

收藏文章 点赞鼓励

why:为什么要添加富文本编辑器?

如博客等内容网站,一个好用、强大的富文本编辑器是必须项。Simditor 是 Tower 出产的富文本编辑器,简洁大气,强力推荐.

what:添加上simditor后的效果?

逼格满满,有木有~

file

how:如何一步一步实现?

simditor已经有好心人包好了gem,我们可以通过gem来直接进行安装使用。

开始表演

安装 gem

Gemfile
1
gem 'simditor'

执行bundle install

引入 js与 css

app/javascripts/application.js
1
//= require simditor
app/stylesheets/application.scss
1
*= require simditor

在编辑器中使用

在对应的form页面中加入 js

app/views/posts/_form.html.erb
1
2
3
4
5
6
7
8
9
10
11
<!-- 将 textarea 的 id 换成 editor 来使用 -->
<%= f.input :content, label: '项目简介', required: true, placeholder: "项目简介",  input_html: {id: "editor", class: "form-control"} %>

<script type="text/javascript">
  var editor = new Simditor({
          textarea: $('#editor'),
          pasteImage: true,
          defaultImage: '<%= image_path "upload-loading.png" %>',
          upload: {url: '/upload'}
      });
</script>

在 show.html.erb 里面使用 simple_format显示

app/views/posts/show.html.erb
1
2
3
<p>
    <%=  simple_format(@post.content) %>
  </p>

检查效果

这时去新增文章,就已经可以使用simditor了,但还是有个问题,图片无法上传,这是因为我们没有做图片上传功能,下一步补上。

加入上传图片功能

安装图片上传的 gem

Gemfile
1
2
3
4
# 上传文件
gem 'carrierwave'
# 图片处理
gem 'mini_magick'

执行bundle Install

建立上传的数据对象

执行rails g uploader photo,会生成上传图片的uploader,进行配置。

app/uploaders/photo_uploader.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class PhotoUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
  storage :file
  process resize_to_fit: [640, nil]
  def store_dir
    "uploads/photos/"
  end
  # 文件名以时间序列命名
  def filename
    if super.present?
      @name ||= Digest::MD5.hexdigest(current_path)
      "#{Time.now.year}/#{@name}.#{file.extension.downcase}"
    end
  end
  # 图片类型白名单
  def extension_whitelist
    %w(jpg jpeg gif png)
  end
end

建立 photo 的 model

执行rails g model photo,会生成对应的迁移文件,添加所需字段

db/migrate/xxxxxxxxxxx_create_pgotos.rb
1
2
3
4
5
6
7
8
9
10
class CreatePhotos < ActiveRecord::Migration[5.0]
  def change
    create_table :photos do |t|
      t.string :image
      t.timestamps
    end
    add_column :photos,:user_id,:integer
    add_index :photos, :user_id
  end
end

设置挂载图片models\photo.rb

app/models/photo.rb
1
2
3
4
5
class Photo < ApplicationRecord
  validates :user_id, presence: true
  validates :image, presence: true
  mount_uploader :image, PhotoUploader
end

建立一个可以 post 的controller和上传action

执行rails g controller photos,会生成controller文档,加入一个 upload 的 action

app/controllers/photos_controller.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
class PhotosController < ApplicationController
    before_action :authenticate_user!
    def upload
        @photo = Photo.new
        @photo.image = params[:upload_file]
        @photo.user_id = current_user.id
        if @photo.save
          render json: { :success=> true ,:file_path=> @photo.image.url}
        else
          render json: { :success=> false }
        end
    end
end

为这个图片 upload的action 指定路由

config/routes.rb
1
post 'upload' => "photos#upload"

检查效果

现在再去新增文章,图片上传功能应该就可以用了

simditor常见设置项

在 js 中设置,主要的设置项目如以下这些:

1
2
3
4
5
6
7
8
9
10
11
12
13
editor = new Simditor
  textarea: null
  placeholder: ''
  defaultImage: 'images/image.png'
  params: {}
  upload: false
  tabIndent: true
  toolbar: true
  toolbarFloat: true
  toolbarFloatOffset: 0
  toolbarHidden: false
  pasteImage: false
  cleanPaste: false

对于其中的 toolbar, 可以按需设置工具栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
toolbar:  [
  'title'
  'bold'
  'italic'
  'underline'
  'strikethrough'
  'fontScale'
  'color'
  'ol'             # ordered list
  'ul'             # unordered list
  'blockquote'
  'code'           # code block
  'table'
  'link'
  'image'
  'hr'             # horizontal ruler
  'indent'
  'outdent'
  'alignment'
]

简化版的可以用这个

1
2
3
4
5
6
7
8
9
10
11
12
13
toolbar: [
            'bold',
            'italic',
            'underline',
            'strikethrough',  
            'color',        
            'ul',           
            'blockquote',
            'code',        
            'table',
            'link',
            'im
                        ]

参考文章

评论区