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
    그냥이대로 출력되어버립니다..

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
262 XE 개발팁 최근게시물에서 alt 안에 html 소스가 먹힌 경우 이온디 2017.02.18 39
261 XE 개발팁 최근게시물 위젯에서 해당 게시판명 불러오는 함수 이온디 2017.02.18 26
260 최신 웹소식 Linode에서 5달러짜리 가상서버가 나왔네요. 10 기진곰 2017.02.15 127
259 XE 개발팁 그룹별로 게시물 보이게 하기 이온디 2017.02.15 58
258 소스공유 jquery를 이용하여 인풋에 기본값을 placeholder로 바꿔주는 소스 이온디 2017.02.11 53
257 XE 개발팁 HTML5 API 사용시 브라우저 지원 체크하기 file 후하니 2017.02.09 51
256 소스공유 APM 최신 Stable 소스 설치 3 아파치 2017.02.05 90
255 개발이야기 1년간 개발한 모듈의 관리자 페이지 디자인 변경 작업을 하면서.. 4 file 구름이 2017.01.24 152
» XE 개발팁 동영상 삽입시 소스모드로 바꾸지 않아도 되도록 하기 8 기진곰 2017.01.09 177
253 소스공유 토렌트 정보 애드온 수정본 (트레커, 파일쪽 textarea처리) 3 file 우리아기 2017.01.07 124
252 XE 개발팁 애드온에서 변수 중복 방지하기 2 기진곰 2017.01.03 82
251 소스공유 APM 자동설치 스크립트... 28 file 아파치 2016.12.31 207
250 개발이야기 라이믹스가 한 살이 되었습니다. 15 file 기진곰 2016.12.18 272
249 개발이슈 php7 에서 xe 비정상 작동시 확인 구름이 2016.12.16 133
248 XE 개발팁 xe 템플릿에서 가변 변수 사용하기 2 구름이 2016.12.16 109
247 최신 웹소식 구글, 보이지 않는 reCAPTCHA 개발중 4 file 라르게덴 2016.12.12 246
246 소스공유 스크롤바를 아래로 내렸을때 숨겨둔 컨텐츠 표시하기( jquery Infinite Scrolling ) 12 구름이 2016.12.05 209
245 개발이야기 Nginx, Apache PageSpeed 모듈 7 우성군 2016.11.28 141
244 XE 개발팁 사이트 메뉴에 메뉴 타입 추가하는 방법 3 file 갸라 2016.11.28 94
243 최신 웹소식 최근 국내 웹브라우저 점유율 8 file 휘즈 2016.10.19 236
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...