localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

일반 영상 url 도 첨부되도록 수정

Browse Source
This commit is contained in:
nevermoregb 2025-04-09 08:31:59 +09:00
parent 1b354d464c
commit a27de5443a
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/editor/QEditor.vue
View File

@ -55,8 +55,11 @@
<script setup> <script setup>
import Quill from 'quill'; import Quill from 'quill';
import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.snow.css';
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
import $api from '@api'; import $api from '@api';
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
import { useToastStore } from '@s/toastStore';
const toastStore = useToastStore();
const props = defineProps({ const props = defineProps({
isAlert: { isAlert: {
@ -132,27 +135,32 @@
initCheckImageIndex(); initCheckImageIndex();
} }
// 퍼온 영상 넣기 // 영상 넣기
quillInstance.getModule('toolbar').addHandler('video', () => { quillInstance.getModule('toolbar').addHandler('video', () => {
const url = prompt('iframe 태그가 포함된 주소를 입력해 주세요:'); const url = prompt('YouTube 영상 URL을 입력하세요:');
if (url && url.indexOf('<iframe') != -1) { let src = '';
//debugger;
//예시 <iframe width="560" height="315" src="https://www.youtube.com/embed/-nSHIYz5SOM?si=o5aVCkG8CfCeNvHY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
//가라로 추출이라 불안정 할듯
if (url?.trim() == '') return;
// 일반 youtube url
if (url.indexOf('watch?v=') != -1) {
src = url.replace('watch?v=', 'embed/');
// iframe 주소
} else if (url.indexOf('<iframe') != -1) {
// DOMParser를 사용하여 embeded url만 추출 // DOMParser를 사용하여 embeded url만 추출
const parser = new DOMParser(); const parser = new DOMParser();
const doc = parser.parseFromString(url, 'text/html'); const doc = parser.parseFromString(url, 'text/html');
const iframeEL = doc.querySelector('iframe'); const iframeEL = doc.querySelector('iframe');
const src = iframeEL.getAttribute('src'); src = iframeEL.getAttribute('src');
const width = iframeEL.getAttribute('width'); } else {
const height = iframeEL.getAttribute('height'); toastStore.onToast('지원하는 영상 타입 아님', 'e');
return;
// 에디터에 삽입
const index = quillInstance.getSelection().index;
quillInstance.insertEmbed(index, 'video', src);
quillInstance.setSelection(index + 1);
} }
const index = quillInstance.getSelection().index;
quillInstance.insertEmbed(index, 'video', src);
quillInstance.setSelection(index + 1);
}); });
// 이미지 업로드 기능 처리 // 이미지 업로드 기능 처리