동영상 삽입시 소스모드로 바꾸지 않아도 되도록 하기
유튜브, 비메오 등의 동영상을 삽입할 때 특별한 에디터 컴포넌트를 사용하지 않으면 반드시 "소스" 모드로 들어가서 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에서도 동작합니다.

댓글 11
어라...과장 좀 보태서 혁명입니다.
이미지 파일 본문 자동 첨부에서 추가적인 숙원을 해결해 주셨네요.
클릭 한번 줄이는 것이 UX 측면에서는 엄청 큰 차이거든요.
PS. 라이믹스 BRANCH에도 반영 되겠죠?
PS. https://youtu.be/nsTE0uv79L0 이런 주소는 안되겠죠?
넹. 저는 뭔가 oebmed 애드온은 에러가 난무하더군요. 여기서 에러라는건 인식오류 ㅎㅎ
아무튼 최고 입니다. 어차피 짧은 주소를 따오든, 긴 소스를 따오든 유저 입장에서 클릭 횟수의 큰 차이가 없으니
큰 문제는 없습니다.
매번 소스 보기 들어가서 동영상 삽입하곤 했는데...
감사합니다.
에는 소스가
!function(a){"use strict";function b(b){return a.grep(b,function(c,d){return c.length&&a.inArray(c,b)===d})}var c={bodyClass:"xe_content editable",toolbarCanCollapse:!0,toolbarGroups:[{name:"clipboard",groups:["undo","clipboard"]},{name:"editing",groups:["find","selection"]},{name:"links"},{name:"insert"},{name:"tools"},{name:"document",groups:["mode"]},"/",{name:"basicstyles",groups:["basicstyles","cleanup"]},{name:"paragraph",groups:["list","indent","blocks","align","bidi"]},"/",{name:"styles"},{name:"colors"},{name:"xecomponent"},{name:"others"}],allowedContent:!0,removePlugins:"stylescombo,language,bidi,flash,pagebreak",removeButtons:"Save,Preview,Print,Cut,Copy,Paste",uiColor:"#EFF0F0"},d=xe.createApp("XeCkEditor",{ckeconfig:{},editor_sequence:null,init:function(){var a=this;CKEDITOR.on("instanceCreated",function(b){a.cast("CKEDITOR_CREATED")}),CKEDITOR.on("ready",function(b){a.cast("CKEDITOR_READY")}),CKEDITOR.on("instanceReady",function(b){a.cast("CKEDITOR_INSTANCE_READY")}),CKEDITOR.on("instanceLoaded",function(b){a.cast("CKEDITOR_LOADED")})},editorInit:function(d,e){var f=this,g=d,h=g.closest("form"),i=h.find(e.content_field),j=g.data();g.data().editorSequence;this.ckeconfig=a.extend({},c,e.ckeconfig||{}),this.editor_sequence=j.editorSequence,h.attr("editor_sequence",j.editorSequence),CKEDITOR.env.mobile&&(CKEDITOR.env.isCompatible=!0);var k=CKEDITOR.appendTo(g[0],{},i.val());k.on("customConfigLoaded",function(d){if(k.config=a.extend({},d.editor.config,f.ckeconfig),a.isFunction(CKEDITOR.editorConfig)){var g={};CKEDITOR.editorConfig(g),a.each(g,function(a,b){k.config[a]=b})}var h=d.editor.config.bodyClass.split(" ");if(h.push(c.bodyClass),h=b(h),k.config.bodyClass=h.join(" "),e.loadXeComponent){var i=d.editor.config.extraPlugins.split(",");i.push("xe_component"),i=b(i),k.config.extraPlugins=i.join(",")}e.enableToolbar||(k.config.toolbar=[])}),g.data("cke_instance",k),window.editorRelKeys[j.editorSequence]={},window.editorRelKeys[j.editorSequence].primary=h.find("[name="+j.editorPrimaryKeyName+"]")[0],window.editorRelKeys[j.editorSequence].content=h.find("[name="+j.editorContentKeyName+"]")[0],window.editorRelKeys[j.editorSequence].func=function(a){return f.getContent.call(f,a)},window.editorRelKeys[j.editorSequence].pasteHTML=function(a){k.insertHtml(a,"html")}},getContent:function(a){var b=this,c=_getCkeInstance(a).getData();return b.cast("GET_CONTENT",[c]),c},getInstance:function(a){return CKEDITOR.instances[a]},API_EDITOR_CREATED:function(){}});a.fn.XeCkEditor=function(a){var b=new d(this.eq(0),a);return b&&(xe.registerApp(b),b.editorInit(this.eq(0),a)),b},window.xe.XeCkEditor=function(){var a=new d;return a}}(jQuery);
이렇게되있는데 어떻게 집어넣으면되나여?
안됩니다 ㅠㅠ
http://ilme.kr/index.php?mid=board&document_srl=115222
그냥이대로 출력되어버립니다..
라이믹스를 1.8.31
업데이트 한후로 소스를 붙여 넣으면 위 이미지처럼 표시되네요 그전에는 유투브 화면이 나왔었거든요.. 등록하면 정상적으로 표시되긴 합니다.
에디터상에서는 동영상이 뜨지 않고 저렇게 자리만 표시되는 것이 정상입니다. 에디터 스타일을 "라이믹스 기본"으로 지정하시면 어두운 회색 배경이 됩니다.