ckeditor5 유튜브 링크 영상 크기 조절

Question

ckeditor 5를 사용하고 있는데유튜브 링크를 올릴 시 해당 유튜브 영상의 크기와 위치를 조절하고 싶습니다.그러나 html 편집기에서 직접 수정 후 미리보기시 코드가 ckeditor가 정리한 소스로 바뀌는 상황입니다해결 할 수 있는 방법이 있을까요?현재 에디터 create문은 아래와 같습니다.CKSource.Editor.create(document.querySelector(selectorId), {removePlugins: ['Markdown', 'Title'],toolbar: {items: ['undo', 'redo', '|','findAndReplace', 'selectAll', '|','link', 'insertImage', 'insertTable', 'blockQuote', 'mediaEmbed', 'codeBlock', 'horizontalLine', 'specialCharacters', '|','outdent', 'indent', '|','bulletedList', 'numberedList', 'todoList','-','heading', 'style', '|','bold', 'italic', 'underline', 'strikethrough',{label: 'Basic styles',icon: 'text',items: ['fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight','superscript', 'subscript', 'code'],},'removeFormat', '|','alignment', 'pageBreak', '|','sourceEditing'],shouldNotGroupWhenFull: true},mediaEmbed: {previewsInData: true,},// 모든 콘텐츠 허용htmlSupport: {allow: [{name: /.*/, // 모든 태그attributes: true, // 모든 속성 허용styles: true, // 모든 스타일 허용classes: true, // 모든 클래스 허용},],disallow: [],},htmlEmbed: {showPreviews: true,},allowedContent: true, // 모든 태그 허용style: {definitions: [{name: 'Title',element: 'h1',classes: ['document-title'],},{name: 'Subtitle',element: 'h2',classes: ['document-subtitle'],},{name: 'Callout',element: 'p',classes: ['callout'],},{name: 'Side quote',element: 'blockquote',classes: ['side-quote'],},{name: 'Needs clarification',element: 'span',classes: ['needs-clarification'],},{name: 'Wide spacing',element: 'span',classes: ['wide-spacing'],},{name: 'Small caps',element: 'span',classes: ['small-caps'],},{name: 'Code (dark)',element: 'pre',classes: ['stylish-code', 'stylish-code-dark'],},{name: 'Code (bright)',element: 'pre',classes: ['stylish-code', 'stylish-code-bright'],},],},}).then(editor &#61;> {if (data !&#61; null) {editor.setData(data);}CKEditorArray[selectorId] &#61; editor;editor.plugins.get('FileRepository').createUploadAdapter &#61; (loader) &#61;> {};}).catch(error &#61;> {console.log(error);});

양군 · Answer

https://stackoverflow.com/a/18373133요검 참고해보실까요 ? 죄송해요. 확인해본건 아닙니다.extraAllowedContent : "iframe[*]" 요렇게 ?

jeoyjng1 · Answer

CKEditor 5에서 유튜브 영상 크기와 위치를 조절하는 방식은 기본 설정만으로는 제한적일 수 있습니다. CKEditor는 사용자 경험을 위해 HTML을 자동으로 정리하며, 이 과정에서 삽입된 HTML의 속성이 손실되거나 변형될 수 있습니다.다음은 문제를 해결하기 위한 방법입니다.1. mediaEmbed 플러그인 확장CKEditor의 mediaEmbed 플러그인은 기본적으로 YouTube와 같은 미디어 임베딩을 지원합니다. 하지만 기본 설정은 크기나 위치를 세부적으로 조정하기 어렵습니다. 이를 해결하려면 mediaEmbed 렌더링 출력을 사용자 정의할 수 있습니다.javascriptCopy codemediaEmbed: { previewsInData: true, extraProviders: [ { name: 'customYouTube', url: /^https:\/\/www\.youtube\.com\/watch\?v=([\w-]+)/, html: match => { const videoId = match[1]; return ( `

` + `` + `

` ); } } ] },위 코드는 YouTube 링크를 사용자 정의 HTML로 렌더링하는 방법을 보여줍니다. 원하는 크기나 스타일을 조정하려면 style 속성을 수정하세요.2. htmlSupport 설정 조정htmlSupport 플러그인을 사용하면 CKEditor가 HTML 요소와 속성을 필터링하지 않도록 설정할 수 있습니다. 이미 모든 태그와 속성을 허용하도록 설정한 상태이므로 추가적으로 확인해야 할 부분은 에디터가 HTML을 정리하는 과정에서 필요 없는 속성을 삭제하지 않도록 하는 것입니다.javascriptCopy codehtmlSupport: { allow: [ { name: 'iframe', attributes: true, styles: true, classes: true, } ], },위와 같이 iframe 태그에 대한 세부적인 속성을 허용합니다.3. sourceEditing 모드 활성화 후 변형 방지sourceEditing을 활성화한 상태에서 에디터가 자동으로 코드를 수정하지 않도록 방지하는 방법도 있습니다. 아래와 같이 allowedContent: true를 명시적으로 추가해 보세요.javascriptCopy codeallowedContent: true, // 모든 콘텐츠 허용이미 설정되어 있지만, sourceEditing에서 문제 발생 시 이를 확인하세요.4. 추가 플러그인 활용Advanced Content Filter (ACF)와 관련된 동작을 완전히 비활성화하거나, 커스터마이즈한 플러그인을 사용해 YouTube 동영상 삽입 시의 동작을 제어할 수도 있습니다.5. CSS로 위치 및 크기 제어영상 크기나 위치는 HTML로만 처리하기 어렵다면, CSS로 제어할 수도 있습니다.cssCopy code.custom-youtube-container { max-width: 800px; margin: 0 auto; text-align: center; }위와 같은 스타일을 적용해 동영상 크기와 위치를 조정합니다.결론가장 적합한 방법은 mediaEmbed 플러그인을 확장하거나 htmlSupport 설정을 조정하는 것입니다. 이 두 가지를 조합하면 원하는 크기와 위치 조정이 가능합니다. 필요 시 CSS를 활용해 추가적인 세부 조정도 가능합니다.by ChatGPT

ckeditor5 유튜브 링크 영상 크기 조절

2개의 답변

기술 목록