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에 대해 물어보지 않는 것입니다.

 

글쓴이 기진곰

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 애드온은 에러가 난무하더군요. 여기서 에러라는건 인식오류 ㅎㅎ

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

    큰 문제는 없습니다.


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
» XE 개발팁 동영상 삽입시 소스모드로 바꾸지 않아도 되도록 하기 3 기진곰 2017.01.09 77
258 소스공유 토렌트 정보 애드온 수정본 (트레커, 파일쪽 textarea처리) 3 file 우리아기 2017.01.07 94
257 XE 개발팁 애드온에서 변수 중복 방지하기 2 기진곰 2017.01.03 58
256 소스공유 APM 자동설치 스크립트... 27 updatefile 아파치 2016.12.31 165
255 개발이야기 오랜만에 모듈 정리중입니다. file SimpleCode 2016.12.24 123
254 개발이야기 라이믹스가 한 살이 되었습니다. 13 file 기진곰 2016.12.18 206
253 개발이야기 포인트 선물 모듈 UI 정리중입니다. 10 file SimpleCode 2016.12.17 149
252 개발이슈 php7 에서 xe 비정상 작동시 확인 구름이 2016.12.16 82
251 XE 개발팁 xe 템플릿에서 가변 변수 사용하기 2 구름이 2016.12.16 93
250 최신 웹소식 구글, 보이지 않는 reCAPTCHA 개발중 4 file 라르게덴 2016.12.12 203
249 개발이야기 요즘 시간날때마다 틈틈히 만들고 있는 프로그램(?)입니다. 9 file SimpleCode 2016.12.10 216
248 소스공유 스크롤바를 아래로 내렸을때 숨겨둔 컨텐츠 표시하기( jquery Infinite Scrolling ) 12 구름이 2016.12.05 178
247 개발이야기 포인트 선물 모듈 업데이트 중입니다 :) 16 file SimpleCode 2016.12.04 153
246 개발이야기 Nginx, Apache PageSpeed 모듈 7 우성군 2016.11.28 121
245 XE 개발팁 사이트 메뉴에 메뉴 타입 추가하는 방법 3 file 갸라 2016.11.28 80
244 개발이야기 포인트 플러스 모듈 관리자 페이지 UI를 열심히 다듬고 있습니다. 1 file SimpleCode 2016.11.27 75
243 최신 웹소식 최근 국내 웹브라우저 점유율 8 file 휘즈 2016.10.19 194
242 개발이야기 슈퍼캐시 사용시 캐시파일 재생성 오류 패치 69 기진곰 2016.10.05 308
241 개발이야기 회원 차단 모듈 .. (수요조사) 20 구름이 2016.09.28 173
240 개발이야기 회원 차단 모듈 개발중.. 중간 잡담 21 구름이 2016.09.26 143
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...