我是新手,我正在尝试为我的博客创建一个富文本编辑器。我使用 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>
这是我的帖子 Controller :
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 中的内容保存到帖子中的“内容”。
非常感谢任何帮助。谢谢。
最佳答案
这是因为您的“编辑器”未绑定(bind)到“内容”字段。
您需要在表单提交时将数据从编辑器复制到内容字段。单击提交按钮时调用另一个 JS 函数,该 js 函数将数据从编辑器复制到内容字段,然后使用 JavaScript 提交表单。
另一个解决方案是,尝试将编辑器附加到 text_area 内容字段。
<%= f.text_field :content %>
和
var quill = new Quill('#post_content', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
您可以使用 JavaScript 附加工具栏。
关于ruby-on-rails - 如何捕获在富文本编辑器中输入的内容并将其保存在 Rails 模型中? - 羽毛笔丰富的编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42967325/