tinymce 사용기

다들 tinymce를 사용한 경험이 있는지 모르겠다.

아래는 공식사이트 링크이다.

https://www.tinymce.com

한마디로 말하면, 쓰기좋은 웹 에디터이다.

다른 웹 에디터보다 역사도 오래 되었다.

지금까지 꾸준히 업데이트 되는 것도 좋은거 같다.

여튼 최근에 해당 라이브러리를 사용하여서 에디터 입력을 받고 서버에 저장해야 할 일이 생겼다.

예제가 잘 나와있기에 자세한 사항은 해당 홈페이지의 예제를 참고하면 된다.

문제는 에디터에 이미지가 들어갈때였다.

인터페이스 딴에는 간단한거 같아도 이미지 하나 들어가면 그걸 서버에 저장하고 다시 뿌려주는것부터 복잡한 과정이 있다.

다행이도 그에 관한 자세한 설명이 아래의 링크에 있었다.

https://stackoverflow.com/questions/47757838/how-to-add-plugin-like-filemanager-for-tinymce-in-nodejs-express

본 링크에서는 tinymce와 서버로는 node.js를 사용하여 어떻게 이미지를 저장하는지 잘 설명되어 있다.

그런데 이 부분을 진행하다가 약간의 문제가 생겼다.

최종적으로 이미지를 submit 하게 되면 이미지 주소에 업데이트된 주소가 아닌 base64 등의 긴 주소가 찍힌다는 점이다.

물론 나와같은 고민이 있었던 사람들은 참 많았다.

(아래는 나와같은 고민을 한 사람의 질문 링크)

https://community.tinymce.com/communityQuestion?id=90661000000MrVzAAK

여튼 몇시간째 씨름하던중 해결책을 찾았다.

아래는 내가 짠 코드다.

tinymce.init({

  selector: '#briefSummary',

  plugins : 'advlist autolink link image lists charmap print preview',

  toolbar: [

    'undo redo | styleselect | bold italic | alignleft aligncenter alignright | link image'

  ],

  height: 400,

  branding: false,

  image_title: true,

  file_picker_types: 'image',

  file_picker_callback: function(cb, value, meta) {

    var input = document.createElement('input');

    input.setAttribute('type', 'file');

    input.setAttribute('accept', 'image/*');

    input.onchange = function() {

      var file = this.files[0];

      var reader = new FileReader();

      reader.onload = function () {

        var id = 'blobid' + (new Date()).getTime();

        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;

        var base64 = reader.result.split(',')[1];

        var blobInfo = blobCache.create(id, file, base64);

        blobCache.add(blobInfo);

        cb(blobInfo.blobUri(), { title: file.name });

      };

      reader.readAsDataURL(file);

    };

    input.click();

  },

  images_upload_url: '/dashboard/create/upload-cdimg',

  images_reuse_filename: true,

  language: 'ko_KR',

  setup: function (editor) {

    geditor = editor;

    editor.on('change', function (e) {

      editor.save();

    });

  }

});

/../

$('#cform').submit(function(e) {

  e.preventDefault();

  //실질적으로 이미지를 서버에 업로드 시키는 이벤트

  geditor.uploadImages(function(success) {

  })

})

위 설정에서 우리가 눈여겨 봐야할 점은 아래의 두 속성이다.

images_upload_url: '/dashboard/create/upload-cdimg'

images_reuse_filename: true

첫번째는 이미지를 업로드하기 위해 서버에 접근하는 주소이고,

두번째는 그렇게 업로드 되어 리턴한 새로운 이미지 주소를 현재 에디터에 바로 반영해주는 옵션이다.

바로 반영해주어야 나중에 submit 옵션이 발생했을때 해당 이미지의 주소가 제대로 뜨게 된다.

이 두 옵션을 몰라서 정말 헤멨다 ㅋ..

images_upload_handler 라는 옵션을 통해서 이미지의 주소값을 바로 잡아주는 방법도 있는거 같긴 한데,

그건 좀 더 복잡해서 위의 방법을 택했다.

그리고 참고로 아래의 코드는 에디터에 변경이 일어날때마다 그 정보를 저장해주겠다는 코드다.

해당 코드가 없으면 submit을 두번씩 눌러야 업데이트된 내용이 반영되니 잘 참고하길 바란다. (기본적으로 예제에 본 코드가 세팅되어 있긴 하다.)

editor.on('change', function (e) {

  editor.save();

});