2018년 5월 4일 금요일

Rich Text Editor (RTE)에 YouTube 버튼 추가하기

사이트코어는 Telerik 에디터를 기본 Rich Text Editor (RTE)로 사용하며, Core DB에서 HTML Profile 세팅을 통하여 CMS Author들에게 툴 사용 제한을 둘수가 있다.

최근 회사에서 블로그 페이지 및 툴을 새롭게 만들었으며, 블로그 Author로부터 YouTube 링크를 RTE 디자인 모드에서 추가하고 싶어한다. 이번에는 어떻게 새로운 버턴을 만들고 커맨드를 형성 시키는지 알아보도록하자.
  1. Core DB로 이동 후, 새로운 버턴을 추가하고 싶어하는 Tool에서 "__Html Editor Button"의 템플릿으로 새로운 아이템을 추가한다.



  2. 새로운 아이템의의 속성을 아래와 같이 변경해주며, 아이템 아이콘, 디스플레이 이름도 변경한다.



  3.  "/WebSite/sitecore/shell/Controls/Rich Text Editor/RichText Commands.js" 파일로 이동 후, 새로운 "RadEditorCommandList"를 추가하고, "Regular Expression"을 통하여, 유튜브 비디오 아이디만을 가져온다.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    RadEditorCommandList["InsertYouTube"] = function (commandName, editor, args) {
    var d = Telerik.Web.UI.Editor.CommandList._getLinkArgument(editor);
    Telerik.Web.UI.Editor.CommandList._getDialogArguments(d, "A", editor, "DocumentManager");

    // Highlight 되어진 텍스트만 가져온다.
    var html = editor.getSelectionHtml();
    if (getId(html)) {
        var videoId = getId(html);
        scEditor = editor;
        scEditor.pasteHtml('<div class="blog-rte-youtube"><iframe width="560" height="315" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>');
    } else {
        // Highlight 되어진 텍스트가 YouTube 아이디와 매치가 되지 않을 경우, 메세지를 보낸다.
        alert("Please highlight YouTube link URL.");
    }
};

//Get YouTube video ID
function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return false;
    }
}


  4. Master DB로 이동 후, RichText Editor를 사용하고 페이지에서 Editor Popup을 실행한다.



YouTube 링크 버턴










Posted by at
Labels: , , , ,