Sitecore Space - 사이트코어: Bootstrap

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>