使用 tinymce-rails 設置 Upload Image方法

2024-12-06 18 次瀏覽

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

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

bundle install

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

設置 tinymce.yml：(功能項目可以自己定義取捨)


default:
  plugins:
    - image
    - link
    - lists
    - preview
    - advlist
    - autolink
    - preview
    - anchor
    - searchreplace
    - visualblocks
    - visualchars
    - code
    - media
    - nonbreaking
    - table
    - emoticons    
  toolbar: [
    'undo redo | formatselect | bold italic underline strikethrough | forecolor backcolor',
    'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
    'link image media table | emoticons code preview'
  ]
  menubar: false
  height: 300
  images_upload_url: '/tinymce_assets'
  automatic_uploads: true
  images_reuse_filename: true
  relative_urls: false
  block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6;'
  toolbar_mode: 'wrap'

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,

可以看這篇：文章連結