동영상 삽입시 소스모드로 바꾸지 않아도 되도록 하기

유튜브, 비메오 등의 동영상을 삽입할 때 특별한 에디터 컴포넌트를 사용하지 않으면 반드시 "소스" 모드로 들어가서 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 = { '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"', '&#039;': "'" };
    if (e.data && e.data.dataValue && e.data.dataValue.replace) {
        e.data.dataValue = e.data.dataValue.replace(/&lt;(iframe|object)\s[^<>]+&lt;\/\1&gt;/g, function(m1) {
            return m1.replace(/&(amp|lt|gt|quot|#039);/g, function(m2) {
                return htmlmap[m2];
            }) + '<p>&nbsp;</p>';
        });
    }
});

3. 라이믹스에서는 여기까지만 해주면 됩니다. XE에서는 수정한 editor.app.js를 editor.app.min.js에도 똑같이 붙여넣어 주어야 합니다. 괜히 압축하지 말고 그냥 복사하세요. 이런 파일 하나 압축 안 해도 아무 차이 없습니다.

4. 글쓰기 화면에서 유튜브 동영상 소스를 붙여넣어 봅니다.

※ CKEditor에서만 작동합니다. XpressEditor에 대해 물어보지 마세요. 파이트 클럽의 첫 번째 규칙은 XpressEditor에 대해 물어보지 않는 것입니다. 파이트 클럽의 두 번째 규칙도 XpressEditor에 대해 물어보지 않는 것입니다.

※ 라이믹스에서는 #721에서 이 기능을 추가했습니다. 라이믹스에 정식으로 패치된 소스는 라이믹스 전용 함수를 사용하므로 XE에서 가져다 쓸 수 없습니다. 위에서 소개한 소스는 XE에서도 동작합니다.