[Ruby on Rails] WYSIWYG에디터 tinyMCE 이미지업로드

최근 레일즈 프로젝트에서 채택한 위지위그 에디터 tinyMCE

gem 'tinymce-rails'

gem 'tinymce-rails-imageupload'

(이미지 업로드는 active_storage를 사용함)

git 문서 보고 따라하니 잘 되더라.

이미지업로드까지 잘 되는 것을 확인하고, 다른 것 들을 구현하다가

I18n을 적용하게 되었다.

I18n까지 구현이 완료된 후, 사진 업로드 기능을 테스트해보는데 웬 걸

업로드 완료 후, 어쩔 땐 이미지가 보이고, 어쩔 땐 안보이더라.. 응?

뭐야이거

가만 살펴보니 I18n을 적용하고 url이 localhost:3000/ko/mypath/1  이런식으로 변경되버린 후에,

이미지의 url이 ../../rails/active_storage/blobs/~~로 바뀌어 있더라.... 또 어떤 것은 ../rails/active~~...

그래서 어떤 것은 나오고 어떤 것은 안나오게 되는 상황이 되었다.  상대경로가 다르니.. 서버엔 올라갔어도 보이지가 않는 현상.

AWS S3로 저장소를 바꿔봐도 마찬가지..

흠...

삽질1. 라우팅 문제인가?  (제일 빅 삽질)

스택오버플로우도 관련해서 답변이 많이 없더라. 링크

-> 라우팅에 제한조건(Constraint)를 달아서 url에 rails/active_storage/blobs가 포함된다면 i18n라우트를 태우지 않고 리다이렉트 하기

-> 해봤더니 TOO MANY REDIRECT가 뜨더라..

삽질2. tinymce-rails-imageupload를 이용하면서 이미지 업로드가 성공한 경우 응답 json에 지정된 url이 이상한가?

디버깅 해보니 url은 정상적이다.

삽질3. 그럼 삽질2에서 지정하는 url을 풀 url이 아닌, rails/active_storage/blobs 로 시작하는 부분만 응답으로 보내보자.

url이 ko/mypath/1/rails/ 이렇게 되어서 404 뜸..

두어시간이 지났다.

이미지를 업로드한 직후엔 사진이 보였기 때문에

이미지를 업로드한 직후, 게시글을 작성한 직후 소스를 비교해보았다.

이미지를 올린 직후

게시글을 작성을 완료한 후

헉....  보이는가?

이미지를 올린 직후 data-mce-src에 지정되어 있는 내용들이

게시글을 올린 후에 src로 대체된다.

으아니

으아니~~~~~~~~~~~~~~~~~~~~~~

으악

구글링구글링스택오버플로우스택오버플로우

에디터 설정에 단 두~~줄만 추가해주면 끝나는 문제였던 것이였던 것이였다.

relative_urls: false

remove_script_host: false

..........

내 두 시간 어디로?  (라우팅 문서들 찾아보면서 constraint를 알았으니 퉁....ㅠㅠㅠ)

하여튼 위 설정을 tinymce.yml에 작성하고 다시 해보니..

이미지 업로드 후

게시글 작성 후

이제 망할 상대경로로 변경되지 않는다.

..삽질일기 끝