Sitecore Space - 사이트코어: RichText Editor

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

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>

2016년 6월 8일 수요일

Hyperlink Manager의 URL경로 가져오기

#사이트코어 #RichTextEditor #Telerik

RichText 에디터를 사용하다보면, Telerik을 통하여 Hyperlink를 설정할수가 있다. 이 경우, 해당 URL 필드에 미디어 파일을 선택할수가 있는데, 미디어를 선택하고 나면, 아이템의 Physical file경로가 아닌 "/~/media/[ShortID].ashx"로 변경된다. 물론, 이 세팅은 .config 파일에서 변경이 가능하지만, 시스템적으로 고유의 ID를 통하여 파일을 렌더링하는것이 더 효율적이다라고 할수있다.

GetMediaURI 과 GetItemURL 메서드를 이용하여, 파일의 경로를 찾아낼수있지만, 추가적으로 선택된어진 아이템의 "/~/media/" + item.ID.ToShortID() + ".ashx" 형식으로 정보를 가져와야하므로, 번거로움이 있다. 이럴경우, `MediaUrlOptions()`를 통하여 URL필드의 값을 쉽게 가져올수가 있다.

var mPath = new MediaUrlOptions();

// UseItemPath는 아이템을 경로를 통하여 나타낼것인지, 
// 아니면 아이디를 통하여 나타낼것인지 미리 설정을 할수가 있다.
mPath.UseItemPath = false;

var url = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imageField.MediaItem, mPath);

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("버턴을 클릭하면 메세지가 출력된다.");
};