Wie erfasst man Inhalte, die in einem Rich-Text-Editor eingegeben wurden, und speichert sie in einem Rails-Modell? - Quill Rich Editor

Question

Ich bin neu und ich versuche, einen Rich-Text-Editor für mein Blog zu erstellen. Ich verwende Quill als Rich-Text-Editor für meine Ruby on Rails-Anwendung. Ich habe es eingerichtet, aber ich stoße jetzt auf ein Problem mit dem Speichern der Inhalte in den Editor eingegeben.

Hier ist meine Form:

<%= 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> 

Hier meine Beiträge Controller ist:

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 

Ich brauche den Inhalt von Quill auf 'Inhalt' in Beiträge zu speichern.

Jede Hilfe wird sehr geschätzt. Vielen Dank.

Answer 1

Dies liegt daran, dass Sie "Editor" nicht an das Feld "Inhalt" binden.

Sie müssen entweder Daten aus dem Editor in das Inhaltsfeld der Formularübergabe kopieren. Rufen Sie eine andere JS-Funktion auf Senden Schaltfläche klicken, in der Funktion js Daten vom Editor in das Inhaltsfeld kopieren und dann das Formular mit Javascript senden.

Eine andere Lösung ist, versuchen Sie, Editor zu Text_area Inhalt Feld anhängen.

<%= f.text_field :content %> 

und

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

    theme: 'snow' 
    }); 

können Sie anhängen Symbolleiste Javascript.