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

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 

我需要的内容从奎尔保存到帖子“内容”。

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

Answer 1

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

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

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

<%= f.text_field :content %> 

和

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

    theme: 'snow' 
    }); 

您可以使用JavaScript使用附加的工具栏。