Ruby China

Rails Rails 富文本编辑配置阿里云存储不显示图片

zengfengbo · 2019年10月03日 · 最后由 zengfengbo 回复于 2019年11月09日 · 3839 次阅读

采用 activestorage-aliyun 配置阿里云 oss 存储

#gemfile
gem 'aliyun-sdk'
gem 'activestorage-aliyun'

在 storage.yml 中配置好存储

production:
  service: Aliyun
  access_key_id: "your-oss-access-key-id"
  access_key_secret: "your-oss-access-key-secret"
  bucket: "bucket-name"
  endpoint: "https://oss-cn-hangzhou.aliyuncs.com"
  # path prefix, default: /
  path: "my-app-files"
  # Bucket mode: [public, private], default: public
  mode: "public"

环境配置

# config/development.rb
  config.active_storage.service = :development

在 Model 中添加富文本内容

has_rich_text :content

编辑插入图片 插入图片

显示页面没有图片 不显示图片

环境设置成本地存储是正常的。 操作过程的区别是，设置阿里云存储，编辑时插入图片后，相比本地存储，图片上会显示一个空的进度条。如上上图所示。

1 个赞
lidashuang #1 2019年10月04日

inspect 下看下 url

lidashuang #2 2019年10月04日

config.active_storage.service = :development

这话不是配置 aliyun 吗

zengfengbo #3 2019年10月04日

development 和 production 的设置只有存储的目录不一致

zengfengbo #4 2019年10月04日

完整日志输出如下： 日志输出

zengfengbo #5 2019年10月04日

生成的富文本内容不正常。

<div>图片如下<br></div>

正常的应该包含"action-text-attachment"这个 tag.

<div>test<br><action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSIyZ2lkOi8vYmlvY3NpL0FjdGl2ZVN0b3JhZ2U6OkJsb2IvMz9leHBpcmVzX2luBjsAVEkiDHB1cnBvc2UGOwBUSSIPYXR0YWNoYWJsZQY7AFRJIg9leHBpcmVzX2F0BjsAVDA=--0d5219dfd2f4710ebec02f47988a22a2e82754bc" content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--58520285e5ff5068ecb62c1b1acd1f98a1e32e03/Snipaste_2019-10-01_11-19-15.png" filename="Snipaste_2019-10-01_11-19-15.png" filesize="15048" width="466" height="112" presentation="gallery"></action-text-attachment></div>
huacnlee #6 2019年10月07日

对于新手和目前版本的 Rails 6.0，建议不要用 Trix，不要用 ActionText，不要用 ActiveStorage，有些东西很复杂你吃不透。

建议换用 CarrierWave + CKEditor

https://github.com/huacnlee/ckeditor5-build-rails

2 个赞
需要 登录 后方可回复, 如果你还没有账号请 注册新账号