[vue-editor] 이미지 업로드 방지

vue-editor 이미지 업로드 방지

 

 vue-editor로 이미지를 업로드하지 않는 이유는 만든 사이트에 유해한 이미지가 업로드되었을 때 이를 주기적으로 모니터링하며 봐줄 사람이 없기 때문에 해당 기능을 막을 수밖에 없었다.

 

 

step1. editorToolbar에서 이미지 업로드 제거

 

vue-editor은 editorToolbar라는 prop을 제공한다. 이를통해서 이미지 업로드 기능을 제거해주어야 한다.

 

다음은 Toolbar에 대한 설정값 전체이다.

사용하지 않는 기능을 제거해서 사용하자.

 

 data: () => ({
    fullToolbar = [
      [{ font: [] }],

      [{ header: [false, 1, 2, 3, 4, 5, 6] }],

      [{ size: ["small", false, "large", "huge"] }],

      ["bold", "italic", "underline", "strike"],

      [
        { align: "" },
        { align: "center" },
        { align: "right" },
        { align: "justify" }
      ],

      [{ header: 1 }, { header: 2 }],

      ["blockquote", "code-block"],

      [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],

      [{ script: "sub" }, { script: "super" }],

      [{ indent: "-1" }, { indent: "+1" }],

      [{ color: [] }, { background: [] }],

      ["link", "image", "video", "formula"], // 여기 image 제거

      [{ direction: "rtl" }],
      ["clean"]
    ];
  })

https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/fullToolbar.js  

GitHub - davidroyer/vue2-editor: A text editor using Vue.js and Quill

 

step2. ctrl + c / v를 통한 이미지 업로드 방지

 

위에 Toolbar에서 해당 기능을 제거하더라도 ctrl + c / v를 통해서 이미지를 업로드할 경우 이미지가 업로드되는 것을 볼 수 있을 것이다. 이를 막아주는 기능은 vue-editor 라이브러리에서 제공하지 않는다. (적어도 내가 docs를 읽을 때 해당 기능을 찾을 수 없었다. 혹시 아시는 분은 댓글로 알려주세요)
해서 추가적인 작업이 필요하다.

 

다양한 방법이 있을 수 있는데 내가 해결한 방법은 다음과 같다. 
이렇게 작성한 이유는 기본적으로 1,600자를 입력 제한으로 걸어두었기 때문이다. 
그 이상의 엄청난 양의 텍스트를 입력할 경우 성능상 어떻게 될지는 모르겠다.

 

<template>
  <div class="vue_editor_wrap">
    <vue-editor :editorToolbar="customToolbar" class="mb-2 pl-4 pr-4" v-model="wri_content"></vue-editor>
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor';
export default {
  name: 'BoardWrite',
  components: { VueEditor },
  data: () => ({
    wri_content: '',
    customToolbar: [
      [{ header: [false, 1, 2, 3, 4, 5, 6] }],
      [{ size: ['small', false, 'large', 'huge'] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
      // [{ header: 1 }, { header: 2 }],
      ['blockquote', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
      // [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ color: [] }, { background: [] }],
      // ['link', 'image', 'video', 'formula'],
      // [{ direction: 'rtl' }],
      ['clean'],
    ],
  }),
  watch: {
    wri_content() {
      // ctrl+c/v 이미지 업로드 방지
      const $qlEditorP = document.querySelectorAll('#quill-container .ql-editor p'); //vue-editor에 있는태그
      $qlEditorP.forEach((pTag) => {
        if (!pTag.children[0]) return;
        if (pTag.children[0].tagName === 'IMG') {
          pTag.children[0].remove(); //img태그일 경우 해당 태그를 제거해버린다.
        }
      });
    },
  },
};
</script>

 

입력할 때마다 forEach를 돌리다니!!!
무식한 방법이라고 생각할지는 모르겠다.

 

ctrl + c / v 키를 아예 막아버리는 방법을 생각도 해 봤지만, 다른 글 들은 복붙이 가능하도록 그냥 두고 싶었다. 
이 기능 없는 에디터를 간혹 보는데 정말 화가 났기 때문이다.
그 이유 외에도 해당 이벤트가 모바일에서 잘 동작할지는 의문이 들기 때문도 있었다. 

 

더 좋은 방법이 있다면 댓글로 알려주세요~ ><