서식있는 텍스트 편집기에서 입력 한 내용을 캡처하여 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

"편집자"가 "콘텐츠"필드에 바인딩되어 있지 않기 때문입니다.

양식 제출시 편집기에서 내용 입력란으로 데이터를 복사해야합니다. submit 버튼을 클릭 할 때 다른 JS 함수를 호출합니다. js 함수는 편집기에서 content 필드로 데이터를 복사 한 다음 javascript를 사용하여 양식을 제출합니다.

다른 해결책은 text_area 콘텐츠 필드에 편집기를 첨부 해보십시오.

<%= f.text_field :content %> 

및

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

    theme: 'snow' 
    }); 

당신은 자바 스크립트를 사용하여 도구 모음을 추가 할 수 있습니다.