Rails5中tinymce-rails-imageupload上传图片编辑页不显示问题求助

我刚仔细看了你的代码和问题描述，发现几个关键问题导致编辑页看不到图片，咱们一步步来解决：

1. 核心问题：图片存储模型设计不合理 #

你现在的upload_image方法是创建一个新的Blog实例来存上传的图片，但一个博客通常会有多张图片，这种做法会产生大量只有图片字段的无效Blog记录，同时也会导致图片URL的关联逻辑混乱。咱们先把这个问题修正：

创建独立的Image模型 #

首先生成Image模型来专门存储富文本里的图片：

rails generate model Image file:string alt:string hint:string
rails db:migrate

然后修改Image模型，挂载上传器：

# app/models/image.rb
class Image < ApplicationRecord
  mount_uploader :file, ImageUploader
end

更新博客控制器的上传方法 #

把BlogsController里的upload_image方法改成用Image模型存储，同时返回完整URL确保编辑模式下能加载：

def upload_image
  image = Image.create params.permit(:file, :alt, :hint )
  # 生成完整URL，避免TinyMCE编辑时解析相对路径失败
  full_image_url = request.base_url + image.file.url
  render json: { image: { url: full_image_url } }, content_type: "text/html"
end

2. 配置TinyMCE确保图片正确解析 #

编辑页看不到图片的另一个原因是TinyMCE默认配置可能没有正确处理图片标签或URL路径，咱们添加自定义配置：

创建TinyMCE配置文件 #

在app/assets/javascripts/下新建tinymce_config.js：

tinymce.init({
  selector: '.tinymce',
  // 启用图片上传插件
  plugins: 'image',
  // 工具栏显示图片操作按钮
  toolbar: 'undo redo | bold italic | image',
  image_title: true,
  automatic_uploads: true,
  // 指定图片上传接口地址
  images_upload_url: '/tinymce_assets',
  file_picker_types: 'image',
  // 关联项目的CSS样式，保证编辑预览和展示页样式一致
  content_css: '/assets/application.css',
  // 明确允许img标签的必要属性，避免TinyMCE过滤掉src
  extended_valid_elements: 'img[src|alt|title|class|id]',
  // 禁用相对路径，强制使用完整URL
  relative_urls: false,
  remove_script_host: false
});

更新Application.js引入配置 #

修改app/assets/javascripts/application.js，确保加载顺序正确：

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

3. 修正表单里的TinyMCE调用 #

把_form.html.erb里的<%= tinymce :text_css => asset_path('application.css')%>删掉，因为咱们已经在自定义配置里指定了content_css，避免重复配置导致冲突。

做完这些修改后，重启Rails服务器，重新上传图片测试：

• 创建新博客上传图片，编辑页应该能正常显示图片了
• 之前的旧博客图片可能因为路径问题无法显示，你可以手动更新text字段里的img src为新的完整URL，或者重新上传图片替换

为什么之前的方式不行？ #

1. 用Blog存图片导致数据关联混乱，图片URL指向的是另一个Blog实例的文件路径，虽然show页sanitize后能加载，但TinyMCE在编辑模式下对路径解析更严格
2. 返回相对URL而不是完整URL，开发环境下TinyMCE可能无法正确识别相对路径的图片资源

内容的提问来源于stack exchange，提问作者arthur