2017년 4월 13일 목요일

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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/ 폴더에 저장하면 된다.

1
2
3
4
5
6
7
8
<?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>


Posted by at
Labels: , ,