❤
npm
Sign UpSign In

ckeditor5-build-rails

18.0.1 • Public • Published

CKEditor 5 for Rails

Documentation

CKEditor 5 for Rails application

  • Base on @ckeditor/ckeditor5-build-classic.
  • Default config toolbars.
  • Upload image for Rails applicaiton (CSRF).
  • All-in one file (build/ckeditor.js) for using.
  • 基于 CKEditor 官方的 @ckeditor/ckeditor5-build-classic 实现；
  • 根据实践经验总结出的 Toolbar 配置，具体看图；
  • 上传支持 Rails 应用的（CSRF）；
  • 使用需要一个文件即可 (build/ckeditor.js)

Quick start

Put build/ckeditor.js in your Rails application.

public
  js
    ckeditor.js

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <%= csrf_meta_tags %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script type="text/javascript" src="<%= asset_path("/js/ckeditor.js", skip_pipeline: true) %>"></script> 
    ...
  </head>
</html>

In your JavaScript application:

# app/javascript/packs/index.js
document.addEventListener('turbolinks:load', () => {
  # Init CKEditor
  ClassicEditor.create(document.querySelector('.ckeditor'), {
    simpleUpload: { uploadUrl: '/uploads' },
  })
})

In your Rails controller:

# app/controllers/uploads_controller.rb
class UploadsController < ApplicationController
  # POST /uploads { upload: <File> }
  def create
    uploader = FileUploader.new
    uploader.store!(params[:upload])
    render json: { url: uploader.url }
  end
end

You need a CarrierWave Uploader:

# app/uploaders/file_uploader.rb
class FileUploader < BaseUploader
  def store_dir
    "uploads"
  end
 
  def filename
    "files/#{Time.now.strftime("%Y%m")}/#{secure_token}.#{file.extension}" if original_filename.present?
  end
 
  protected
    # Generate a random key like ActiveStoreage
    def secure_token
      return SecureRandom.base58(32) if model.nil?
      var = :"@#{mounted_as}_secure_token"
      model.instance_variable_get(var) || model.instance_variable_set(var, SecureRandom.base58(32))
    end
end

In your edit form:

<%= form_for @post do |f| %>
  <%= f.text_area :body, class: "ckeditor" %>
<% end %>

Readme

Keywords

Package Sidebar

Install

npm i ckeditor5-build-rails

Repository

github.com/huacnlee/ckeditor5-build-rails

Homepage

github.com/huacnlee/ckeditor5-build-rails

Weekly Downloads

0

Version

18.0.1

License

GPL-2.0-or-later

Unpacked Size

5.36 MB

Total Files

6

Last publish

Collaborators

  • huacnlee
Try on RunKit
Report malware