Rails5 tinymce-rails-imageupload /已上传的图片未显示在编辑页

时间:2018-01-19 15:08:10

标签: ruby-on-rails ruby

您好我正在使用博客模型和用户模型制作博客网站。我使用了carrierwave,TinyMCE,tinymce-rails-imageupload来创建WISYWIG的博客。基本上我跟着这个网站上传了开发中的图片:Use tinymce-rails & tinymce-rails-imageupload with carrierwave & fog

在我创建新的博客文章,上传图片和文字后,我可以在展示页面(blogs / show.html.erb)中看到文字和图片。但是,当我尝试移动到编辑页面(blogs / edit.html.erb)时,我只能看到文本(上传的图片没有显示)。我想在编辑页面中显示图片和文字,以便我可以正确编辑博客页面。我该如何解决这个问题?

*我删除了Application.js中的turbolinks

Blog.rb

class Blog < ApplicationRecord 
   mount_uploader :file, ImageUploader
   validates :text, presence: true, length: { maximum:140}
   validates :title, presence: true, length: { maximum: 20}
end

的routes.rb

Rails.application.routes.draw do
 resources :blogs
 post '/tinymce_assets', to: 'blogs#upload_image'
end

博客/ edit.html.erb

<%= render 'form', blog: @blog %>
<%= link_to 'Back', blogs_path %>

博客/ _form.html.erb

<%= form_for(blog) do |f| %>
   <%= f.label :title %>
   <%= f.text_field :title %>

   <%= f.label :text %>
   <%= f.text_area :text, :class => "tinymce", :rows => 100,
   :cols => 120 %>
   <%= tinymce :text_css => asset_path('application.css')%>
   <%= f.submit %>
<% end %>

博客/ show.html.erb

  <%= @blog.title %>

  <%= sanitize @blog.text, tags: %w(h1 h2 h3 h4 h5 h6 ul ol li p a img 
  table tr td em br strong),  attributes:  %w(id class href src) %>

  <%= link_to 'Edit', edit_blog_path(@blog) %>
  <%= link_to 'Back', blogs_path %>

Blogs_controller.rb

class BlogsController < ApplicationController

   respond_to :json

   def new
     @blog = Blog.new
   end

   def create
     @blog = Blog.new(blog_params)

     if @blog.save
     redirect_to @blog
     else
     render 'new'
     end
   end

   def show
     @blog = Blog.find(params[:id])
   end

   def index
     @blogs = Blog.all
   end

   def edit
     @blog = Blog.find(params[:id])
   end

   def update
     @blog = Blog.find(params[:id])
     if @blog.update(blog_params)
     redirect_to @blog
     else
     render 'edit'
     end
   end

   def destroy
     @blog = Blog.find(params[:id])
     @blog.destroy
     redirect_to blogs_path
   end

   def upload_image 
     image = Blog.create params.permit(:file, :alt, :hint )
      render json: {
        image: {
          url: image.file.url
        }
      }, content_type: "text/html"
    end

    private

    def blog_params
      params.require(:blog).permit(:title, :text, :file, :hint, :alt)
    end
end

Image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

   storage :file

   def store_dir
   "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end

   def extension_white_list
   %w(jpg jpeg gif png)
   end
end

的application.js

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require tinymce

布局/ Application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title))%></title> 
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-
     turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 
     'reload' %>
    <%= render 'layouts/shim' %>
   </head>
  <body>
   <%= render 'layouts/header' %>
   <%= tinymce_assets %> 
   <div class="container">
   <%= yield %>
   <%= render 'layouts/footer' %>
   </div>
   <%= debug(params) if Rails.env.development? %> 
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

我弄明白了这个问题。这是由于相对url设置为true。 在我看来(_form.html.erb),我添加了&lt;%= tinymce:relative_urls =&gt; false%&gt;这解决了这个问题。谢谢。