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

zengfengbo · 2019年10月03日 · 最后由 huacnlee 回复于 2019年10月07日 · 466 次阅读

采用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

编辑插入图片 插入图片

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

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

共收到 6 条回复

inspect下看下url

config.active_storage.service = :development

这话不是配置aliyun吗

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

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

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

<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>

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

建议换用 CarrierWave + CKEditor

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

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册