XETOWN

안개 골목

최신 웹 개발에 대한 이야기들을 나눠보세요. XE개발에 대해서도 배워볼 수 있습니다.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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

 

글쓴이 기진곰

profile

GitHub 아이디는 @kijin입니다. 사람을 위한 인터넷 생태계의 발전과 웹 보안에 많은 관심을 가지고 있습니다.

오픈소스 도로명주소 검색서버 및 API Postcodify를 개발, 운영하고 있습니다.

우리가 만들어 가는 XE의 새 이름, 라이믹스(Rhymix) 프로젝트에 참여하고 있습니다.

국내외 서버 및 클라우드서버 셋팅, 이전, 튜닝해 드립니다.

이 콘텐츠가 마음에 드셨다면 커피 한잔 (후원)

닫기
작가에게 커피 한잔(후원)을 사주세요.
  • profile
    socialskyo 2017.01.09 15:46:25

    어라...과장 좀 보태서 혁명입니다.

    이미지 파일 본문 자동 첨부에서 추가적인 숙원을 해결해 주셨네요.

    클릭 한번 줄이는 것이 UX 측면에서는 엄청 큰 차이거든요.

    PS. 라이믹스 BRANCH에도 반영 되겠죠?
    PS. https://youtu.be/nsTE0uv79L0 이런 주소는 안되겠죠?

  • profile
    기진곰 2017.01.09 15:52:18
    주소만 갖다 붙이는 경우는 동영상 사이트마다 일일이 iframe으로 변환해 주어야 하기 때문에 쉽지 않습니다. 링크만 쓰고 싶은 경우에는 오히려 부작용이 생길 수도 있고요. 유튜브 등 일부 사이트만 지원할 수는 있겠지만, 이런 용도로는 일단 oEmbed를 사용하시는 편이 낫겠습니다.
  • profile
    socialskyo 2017.01.09 15:54:30

    넹. 저는 뭔가 oebmed 애드온은 에러가 난무하더군요. 여기서 에러라는건 인식오류 ㅎㅎ

    아무튼 최고 입니다. 어차피 짧은 주소를 따오든, 긴 소스를 따오든 유저 입장에서 클릭 횟수의 큰 차이가 없으니 

    큰 문제는 없습니다.

  • profile
    쯉쮸릅 2017.02.09 18:25:44
    바로 적용했는데, 엄청 편해졌습니다 ㅎㅎ 감사드립니다 ㅠㅠ
  • profile
    간장게장 2017.02.18 01:27:11
    우와 ~~~~ 엄청 편합니다..
    매번 소스 보기 들어가서 동영상 삽입하곤 했는데...

    감사합니다.
  • profile
    희스깅 2017.02.20 00:19:30
    editor.app.min.js

    에는 소스가

    !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);

    이렇게되있는데 어떻게 집어넣으면되나여?
  • profile
    기진곰 2017.02.20 00:20:54
    다 지우고 editor.app.js의 내용을 그대로 복사해서 넣으세요.
  • profile
    희스깅 2017.02.20 00:26:25
    적용했는데

    안됩니다 ㅠㅠ

    http://ilme.kr/index.php?mid=board&document_srl=115222
    그냥이대로 출력되어버립니다..
  • profile

    Cap 2017-03-07 10-29-31-174.png

    라이믹스를 1.8.31

     업데이트 한후로 소스를 붙여 넣으면  위 이미지처럼 표시되네요 그전에는 유투브 화면이 나왔었거든요.. 등록하면 정상적으로 표시되긴 합니다.

  • profile
    기진곰 2017.03.07 11:18:29

    에디터상에서는 동영상이 뜨지 않고 저렇게 자리만 표시되는 것이 정상입니다. 에디터 스타일을 "라이믹스 기본"으로 지정하시면 어두운 회색 배경이 됩니다.

  • profile
    보고하비 2017.03.07 13:03:36
    네 답변 감사드립니다.
  • ?
    alrin 2017.04.01 14:21:35
    혹시 이미지 태그도 가능할까요?
    img 태그 입력시 에디터에선 바로 안보이고 글작성시 소스코드에 넣은 것 처럼 이미지도 출력되면 좋을 것 같아요

위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...