Summernote Rails 使用教程

Summernote Rails 使用教程

summernote-railsTo gemify the summernote WYSIWYG editor for Rails >= 3.1项目地址:https://gitcode.com/gh_mirrors/su/summernote-rails

项目介绍

Summernote Rails 是一个用于将 Summernote WYSIWYG 编辑器集成到 Ruby on Rails 应用中的 gem。Summernote 是一个基于 Bootstrap 的超简单 WYSIWYG 编辑器。这个 gem 旨在为 Rails 3.1 及以上版本的应用提供 Summernote 编辑器的资产打包。

项目快速启动

安装步骤

1. 将以下 gem 添加到你的应用的 Gemfile 中：

   gem 'rails'
   gem 'jquery-rails'
   gem 'bootstrap'
   gem 'simple_form'
   gem 'summernote-rails', '~> 0.8.16.0'
   

2. 执行 bundle 安装：

   $ bundle install
   

3. 如果你使用 simple_form 和 bootstrap，你应该在终端中执行以下命令：

   $ rails generate simple_form:install --bootstrap
   

4. 特别是如果你想使用 Bootstrap 版本 4，你应该创建 config/initializers/simple_form_bootstrap4.rb，你可以参考这个仓库中的示例项目。

配置 Summernote

在你的应用中，添加以下代码到你的视图中：

<div data-provider="summernote"></div>

然后在你的 JavaScript 文件中初始化 Summernote：

$('[data-provider="summernote"]').each(function() {
  $(this).summernote({
    lang: 'ko-KR',
    height: 300,
    toolbar: [
      ['insert', ['hello']]
    ]
  });
});

应用案例和最佳实践

插入和删除图片

在 Summernote 编辑器中，你可以轻松地插入和删除图片。以下是一个示例：

1. 插入图片：

   $('#summernote').summernote('insertImage', url, filename);
   

2. 删除图片：

   $('#summernote').summernote('removeMedia');
   

自定义工具栏

你可以自定义 Summernote 的工具栏，添加或删除按钮：

$('#summernote').summernote({
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['insert', ['link', 'picture', 'video']],
    ['view', ['fullscreen', 'codeview', 'help']]
  ]
});

典型生态项目

集成 Active Storage

Summernote Rails 可以与 Rails 的 Active Storage 集成，以便直接上传图片到你的应用中。以下是一个示例：

1. 配置 Active Storage：

   # config/routes.rb
   Rails.application.routes.draw do
     resources :notes do
       member do
         post :upload_image
       end
     end
   end
   

2. 在控制器中处理上传：

   # app/controllers/notes_controller.rb
   class NotesController < ApplicationController
     def upload_image
       @note = Note.find(params[:id])
       @note.images.attach(params[:file])
       render json: { url: url_for(@note.images.last) }
     end
   end
   

3. 在视图中配置 Summernote 上传功能：

   $('#summernote').summernote({
     callbacks: {
       onImageUpload: function(files) {
         sendFile(files[0]);
       }
     }
   });
   
   function sendFile(file) {
     var formData = new FormData();
     formData.append('file', file);
     $.ajax({
       data: formData,
       type: 'POST',
       url: '/notes/' + $('#note_id').val() + '/upload_image',
       cache: false,
       contentType: false,
       processData: false,
       success: function(data) {
         $('#summernote').summernote('insertImage', data.url);
       }
     });
   }
   

通过以上步骤，你可以将 Summernote Rails

summernote-railsTo gemify the summernote WYSIWYG editor for Rails >= 3.1项目地址:https://gitcode.com/gh_mirrors/su/summernote-rails