개발일지 35 - 게시글에 이미지 추가하기 - 1

tinymce를 사용해서 게시글을 저장하는 방법을 사용했다. 

 

글 굵기나 글씨체 간격, 선 긋기, 다양한 기능이 포함이 되어있는 툴이었다.

 

이제 이미지를 업로드하는 기능을 추가해주려고 한다. 

 

tinymce.init({
    selector: '#content',  // 사용할 텍스트 영역의 id
    plugins: image_code,
    //plugins: 'image code',
    license_key: 'gpl',
    toolbar_mode: 'floating',
    file_picker_types: 'image',

 

plugins을 image_code로 바꿔주니까 insert부분에 이미지를 추가할 수 있는 기능이 생겼다. 

 

하지만 내가 원하는 모습이 아니어서 직접 새로 만들어줘야 겠다 싶어서 수정을 시작했다. 

 

 toolbar: "custom_image",
setup: function(editor) {
    editor.ui.registry.addButton('custom_image', {
        title: 'Insert Image',
        icon: 'image',
        onAction: triggerTag
    });

 

editor란 TinyMCE 에디터 인스턴스를 나타낸다. editor.ui.registry.addButton을 사용해서 ui에 새로운 버튼을 추가해준다. 

 

새로운 버튼을 클릭할 시에 아래 함수가 실행이 된다. 

 

const triggerTag = function () {
    const image = $("#image");
    image.trigger("click");
    image.on('change', readImage);
};

jQuery 선택자: $("#image")는 HTML 문서에서 id가 image인 요소(파일 입력 요소)를 선택한다.

 

위의 코드가 작동하기 위해서는 아래 코드가 있어야 한다.

 <div class="form-group" >
    <textarea id="content" ....</textarea>
    <input type="file" multiple="multiple" name="image" id="image" style="display: none;" accept="image/*">
</div>

 

accept는 파일 선택 대화상자가 열릴 때, 사용자가 선택할 수 있는 파일의 형식을 제한하는 역할을 한다. image/*는 모든 이미지 파일 형식을 의미한다. 

 

이제 파일을 선택을 하면 readimage라는 함수가 실행이 된다.