vue-editor에서 이미지 업로드 방지
vue-editor를 사용하여 이미지를 업로드하지 않는 이유는 생성된 사이트에 악성 이미지가 업로드되면 주변에 이를 정기적으로 모니터링하고 볼 수 있는 사람이 없어 해당 기능을 차단해야 하기 때문입니다.
1단계. EditorToolbar에서 이미지 업로드 제거
vue-editor는 editorToolbar라는 소품을 제공합니다. 이렇게 하면 이미지 업로드 기능이 제거됩니다.
다음은 도구 모음에 대한 총 설정 값입니다.
사용하지 않는 기능을 제거하고 사용하십시오.
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: Vue.js와 Quill을 이용한 텍스트 편집기
Vue.js 및 Quill이 있는 텍스트 편집기. GitHub에서 계정을 생성하여 davidroyer/vue2-editor 개발에 기여하십시오.
github.com
2단계. Ctrl+C/V를 통한 이미지 업로드 방지
위의 툴바에서 해당 기능을 제거했는데도 ctrl + c/v로 이미지를 업로드 하면 이미지가 업로드 되는 것을 볼 수 있습니다. 이를 방지하기 위한 기능은 vue-editor 라이브러리에서 제공하지 않습니다. (최소한 문서를 읽을 때는 이 기능을 찾을 수 없었습니다. 아시는 분은 댓글로 알려주세요.)
그래서 추가 작업이 필요합니다.
여러가지 가능성이 있겠지만 저는 아래와 같이 해결했습니다.
이렇게 쓴 이유는 기본적으로 입력 제한을 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>
탭할 때마다 영원히 실행하세요!!!
무지한 종이라고 생각하실지 모르겠습니다.
Ctrl + C/V 키를 아예 막는 것도 생각해봤지만, 나머지 텍스트는 복사해서 붙여넣을 수 있도록 열어두고 싶었습니다.
가끔 이 기능이 없는 편집자들을 보고 정말 화가 나기 때문입니다.
또한 이벤트가 모바일에서 잘 작동하는지에 대한 질문도 있었습니다.
더 좋은 방법이 있다면 댓글로 알려주세요~>