使用 tinymce-rails 設置 Upload Image方法

2024-12-06

這裡我使用版本rails7以上, ruby 3.3.0

gem 'tinymce-rails' gem "aws-sdk-s3"

bundle install

使用 storage.yml
可以搭配結合上傳到各家s3(這篇以AWS為例) or 上傳到server (二擇一)

設置:
tinymce.yml

rails config/environments 環境檔案
要區分設置, development 與 production 設定不同, 習慣區分不同環境不同DB.

routes 新增:

post '/tinymce_assets', to: 'tinymce_assets#create'

建立tinymce_assets controlle, 提供編輯器上傳圖片的action.

上傳圖片邏輯, 整理中待分享.

編輯器透過上傳圖片到 tinymce_assets controller中的action:

(AWS_KEYS["xxx"]是自己設定的環境變數, 這個依照專案自己設定即可)



def create
    file = params[:file]
    blob = ActiveStorage::Blob.create_and_upload!(
      io: file,
      filename: file.original_filename,
      content_type: file.content_type
    )

    if Rails.env.production?
      s3_url = "https://#{AWS_KEYS['bucket']}.s3.ap-southeast-1.amazonaws.com/#{blob.key}"

      Rails.logger.info "Blob Key: #{blob.key}"
      Rails.logger.info "Generated URL: #{s3_url}"

      render json: {
        location: s3_url
      }
    else
      render json: {
        location: Rails.application.routes.url_helpers.rails_blob_path(blob, only_path: true)
      }
    end
  rescue => e
    Rails.logger.error "Upload Error: #{e.message}"
    render json: { error: e.message }, status: :unprocessable_entity
  end

p.s.此篇不說怎麼設置AWS S3,

可以看這篇：文章連結