Sitecore Space - 사이트코어: Telerik

레이블이 Telerik인 게시물을 표시합니다. 모든 게시물 표시

2018년 5월 4일 금요일

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

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

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

Core DB로 이동 후, 새로운 버턴을 추가하고 싶어하는 Tool에서 "__Html Editor Button"의 템플릿으로 새로운 아이템을 추가한다.
새로운 아이템의의 속성을 아래와 같이 변경해주며, 아이템 아이콘, 디스플레이 이름도 변경한다.

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

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;
    }
}

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

YouTube 링크 버턴

2017년 4월 13일 목요일

RichText Editor 태그 변경 수정하기 - Telerik's RadEditor

사이트코어에서 에디터툴로 사용되고 있는 Telerik's RadEditor를 수정하고 있는중 Jason's 블로그에서 좋은 정보를 찾았다.

RichText Editor의 에디터를 오픈하고 HTML탭에서 와 태그를 사용하면, 수정된 HTML을 저장하는 중 와 태그를 , 그리고 태그로 변경을 한다.

Front-End 개발자와 프로젝트를 진행하는 중 디자이너들은 Bootstrap 아이콘을 와 태그를 사용하여야 하며, RichText Editor의 필터링에 의해 많은 제약을 받는다.

아래의 코드를 와 태그의 변경을 예외로 설정 할수가 있다.

public class RichTextEditorCustomConfiguration: Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration
{
    /// <summary>
    /// Initializes a new instance of the <see cref="RichTextEditorCustomConfiguration"/> class.
    /// </summary>
    /// <param name="profile">The profile.</param>
    public RichTextEditorCustomConfiguration(Item profile)
        : base(profile)
    {
    }

    /// <summary>
    /// Setup editor filters. 
    /// </summary>
    protected override void SetupFilters()
    {
        //Disable the automatic conversion of <i> and <b> tags to <em> and <strong> for icon-* classes 
        this.Editor.DisableFilter(EditorFilters.FixUlBoldItalic);
        this.Editor.DisableFilter(EditorFilters.MozEmStrong);
        this.Editor.EnableFilter(EditorFilters.IndentHTMLContent);
        base.SetupFilters();
    }
}

아래의 .config파일을 /App_Config/Include/ 폴더에 저장하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="HtmlEditor.DefaultConfigurationType" value="MyProject.RichTextEditorCustomConfiguration, MyProject"/>
    </settings>
  </sitecore>
</configuration>

2015년 12월 18일 금요일

Telerik에 새로운 명령어 추가하기

#HowTo #Javascript #RichTextCommands #Telerik

Telerik은 자바스크립트를 이용하여 에디터의 커맨드를 불러온다.
먼저 자바스크립트의 경로는 "\sitecore\shell\Controls\Rich Text Editor\RichText Commands.js"이며, 커맨드 리스트를 통하여 새로운 버튼을 추가할수가 있다.

첫번째로, Core DB에서 "/setting/HTML Editor Profile"에서 새로운 Profile을 만든 후 버턴 아이템을 만들어준다. "Click" 값은 반드시 Unique한 값을 지정하며, 커맨드 리스트에 추가될 값과 일치하여야한다.

다음 단계로 "RichText Command.js" 파일에 리스트를 추가한다.

RadEditorCommandList["Button Generator"] = function (commandName, editor, args) {
    var d = Telerik.Web.UI.Editor.CommandList._getLinkArgument(editor);
    Telerik.Web.UI.Editor.CommandList._getDialogArguments(d, "A", editor, "DocumentManager");

    //Retrieve the html selected in the editor
    var html = editor.getSelectionHtml();
    scEditor = editor;
    scEditor.pasteHtml("버턴을 클릭하면 메세지가 출력된다.");
};

Telerik's RichText Editor

#FYI #RichTextEditorProfile

Sitecore는 Telerik 플랫폼을 통하여 RichTextEditor를 제공하한다. 템플릿에 Rich Text 데이터 타입을 선택하면 에디터를 사용할수있으며, Core 데이타베이스의 HtmlEditor Profile을 통하여 에디터의 HTML 기능을 추가할수가있다.

추가적으로, source경로가 비어있다면 기본값은 RTE Default로 적용되면, 이는 web.config 파일에서 설정할수가 있다.