如何捕获在富文本编辑器中输入的内容并将其保存在 Rails 模型中？ - Quill 丰富的编辑器

Question

我是新手，我正在尝试为我的博客创建一个富文本编辑器。我正在使用 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 中的内容保存到 Posts 中的“内容”中。

非常感谢任何帮助。谢谢。

Answer 1

这是因为你的“编辑器”没有绑定到“内容”字段。

您需要在表单提交时将数据从编辑器复制到内容字段。单击提交按钮时调用另一个 JS 函数，在该 js 函数中，将数据从编辑器复制到内容字段，然后使用 javascript 提交表单。

另一种解决方案是，尝试将编辑器附加到 text_area 内容字段。

<%= f.text_field :content %>

和

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

    theme: 'snow'
  });

您可以使用 javascript 添加工具栏。

Answer 2

导轨形式：

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

JS：

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