유튜브, 비메오 등의 동영상을 삽입할 때 특별한 에디터 컴포넌트를 사용하지 않으면 반드시 "소스" 모드로 들어가서 iframe이나 object 태그를 붙여넣어야 하는 불편이 있습니다.
modules/editor/tpl/js/editor.app.js 파일을 아래와 같이 수정하면 에디터 상태에서 iframe이나 object 태그를 바로 붙여넣어도 현재 커서 위치에 동영상이 삽입됩니다.
1. 아래와 같은 내용을 찾습니다. 라이믹스 기준으로 150번째 줄 근처에 있습니다.
$containerEl.data('cke_instance', instance);
2. 찾은 내용 바로 윗부분에 아래의 내용을 붙여넣습니다.
instance.on('paste', function(e) {
var htmlmap = { '&': '&', '<': '<', '>': '>', '"': '"', ''': "'" };
if (e.data && e.data.dataValue && e.data.dataValue.replace) {
e.data.dataValue = e.data.dataValue.replace(/<(iframe|object)\s[^<>]+<\/\1>/g, function(m1) {
return m1.replace(/&(amp|lt|gt|quot|#039);/g, function(m2) {
return htmlmap[m2];
}) + '<p> </p>';
});
}
});
3. 라이믹스에서는 여기까지만 해주면 됩니다. XE에서는 수정한 editor.app.js를 editor.app.min.js에도 똑같이 붙여넣어 주어야 합니다. 괜히 압축하지 말고 그냥 복사하세요. 이런 파일 하나 압축 안 해도 아무 차이 없습니다.
4. 글쓰기 화면에서 유튜브 동영상 소스를 붙여넣어 봅니다.
※ CKEditor에서만 작동합니다. XpressEditor에 대해 물어보지 마세요. 파이트 클럽의 첫 번째 규칙은 XpressEditor에 대해 물어보지 않는 것입니다. 파이트 클럽의 두 번째 규칙도 XpressEditor에 대해 물어보지 않는 것입니다.
※ 라이믹스에서는 #721에서 이 기능을 추가했습니다. 라이믹스에 정식으로 패치된 소스는 라이믹스 전용 함수를 사용하므로 XE에서 가져다 쓸 수 없습니다. 위에서 소개한 소스는 XE에서도 동작합니다.
어라...과장 좀 보태서 혁명입니다.
이미지 파일 본문 자동 첨부에서 추가적인 숙원을 해결해 주셨네요.
클릭 한번 줄이는 것이 UX 측면에서는 엄청 큰 차이거든요.
PS. 라이믹스 BRANCH에도 반영 되겠죠?
PS. https://youtu.be/nsTE0uv79L0 이런 주소는 안되겠죠?