Как захватить контент, набранный в редакторе форматированного текста, и сохранить его в модели Rails? - Богатый редактор Quill

Я новичок в этом, и я пытаюсь создать текстовый редактор для своего блога. Я использую Quill в качестве редактора форматированного текста для своего приложения Ruby on Rails. Я настроил его, но теперь у меня проблема с сохранением содержимого, введенного в редактор.

Вот моя форма:

<%= form_for @post do |f| %>
  <% if @post.errors.any? %>
    <h2><%= pluralize(@post.errors.count, "error")%> prevented this post from saving:</h2>
    <ul>
      <% @post.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
      <% end %>
    </ul>
  <% end %>

<%= f.label :title %><br>
<%= f.text_field :title %>

<%= f.label :content, "Write your article here" %><br><br />

<div class="editor">
  <div id="toolbar"></div>
  <div id="editor"></div>
</div>

<%= f.hidden_field :content, id: "form" %>

<%= f.submit "Publish" %>
<% end %>

<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
<script>    
  var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote'],
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'align': []}],
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'color': [] }, { 'background': [] }],
    ['link', 'image', 'video'],
  ]

  var quill = new Quill('#editor', {
    modules: {
      toolbar: toolbarOptions
    },

    theme: 'snow'
  });
</script>

Вот мой контроллер сообщений:

class PostsController < ApplicationController
  before_action :find_post, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!, except: [:index, :show]
  before_action :load_user,  only: [:show]
  before_action :create,  only: [:unapprove]
  load_and_authorize_resource

  def load_user
    if @post.user != nil
      @user = @post.user
    end
  end

  def index
    @posts = Post.approved.all.order("created_at desc").paginate(page: params[:page], per_page: 15)
  end

  def new
    if user_signed_in?
      @post = current_user.posts.build
    else
      @post = Post.new
    end
  end

  def create
    if user_signed_in?
      @post = current_user.posts.build(post_params)
    else
      @post = Post.new(post_params)
    end

    if @post.save && @post.approved && @post.after_approved
      redirect_to @post, notice: "Congrats! Your post was successfully published on The Teen Magazine!"
    elsif @post.save
      redirect_to @post, notice: "Changes were successfully saved!"
    else
      render 'new', notice: "Oh no! Your post was not able to be saved!"
    end
  end

  def show
    redirect_to root_path unless (@post.approved || (current_user && (@post.user_id == current_user.id || current_user.admin?)))
    set_meta_tags title: @post.title,
                  description: @post.meta_description,
                  keywords: @post.keywords
  end

  def unapprove
    @post = Post.unscoped.update(params[:approve], :approved => false)
    render :action => :success if @post.save
  end

  def edit
  end

  def update
    if @post.update post_params
      redirect_to @post, notice: "Changes were successfully saved!"
    else
      render 'edit'
    end
  end

  def destroy
    @post.destroy
    redirect_to posts_path
  end

  private

  def post_params
    params.require(:post).permit(:title, :content, :image, :category, :category_id, :meta_title, :meta_description, :keywords, :user_id, :admin_id, :waiting_for_approval, :approved, :after_approved, :created_at, :slug)
  end

  def find_post
    @post = Post.friendly.find(params[:id])
  end
end

Мне нужно сохранить контент из Quill в «контент» в сообщениях.

Любая помощь очень ценится. Спасибо.


person Mia    schedule 23.03.2017    source источник


Ответы (2)


Это потому, что ваш «редактор» не привязан к полю «контент».

Вам нужно либо скопировать данные из редактора в поле содержимого при отправке формы. Вызовите другую функцию JS при нажатии кнопки отправки, в этой функции js скопируйте данные из редактора в поле содержимого, а затем отправьте форму с помощью javascript.

Другое решение - попробуйте прикрепить редактор к полю содержимого text_area.

<%= f.text_field :content %>

и

var quill = new Quill('#post_content', {
    modules: {
      toolbar: toolbarOptions
    },

    theme: 'snow'
  });

Вы можете добавить панель инструментов, используя javascript.

person scs    schedule 23.03.2017

Форма рельсов:

<%= form.hidden_field :content %>
<div id="editor">
    <%= @object.content.html_safe %>
</div>

JS:

quill.on('text-change', function() {
  $("#content").val(quill.root.innerHTML);
});
person Abel    schedule 05.11.2018