Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Converting Unicode symbols to numeric HTML entities using a content filter

Converting Unicode symbols to numeric HTML entities using a content filter

Article Info

Rating: 5

Article information

Article relates to

RadEditor for ASP.NET AJAX
Telerik.Web.UI

Created by

Rumen Zhekov

Last modified

2010/04/26

Last modified by

Rumen Zhekov

HOW-TO
Convert Unicode symbols to numeric HTML entities using a content filter

DESCRIPTION
When non-Latin [for example, Cyrillic] content is set into an editable HTML element for example DIV or IFRAME, then the browser automatically converts symbols such as "А Б В Г Д"  to their Unicode counterparts "А Б В Г Д" - so, when JavaScript code tries to alert/obtain the content of the HTML element, it is not the "А Б В Г Д" returned, but the Unicode. The original numeric entities content has been lost.

You can observe the same browser behavior in RadEditor too, because the editor's content area is an editable IFRAME element.

SOLUTION
The solution is to implement a clientside function that takes Unicode content and converts the symbols to the notation you prefer (in this case numeric representations of the Cyrillic characters).

The code example below demonstrates how to implement a content filter which will converts the Unicode symbols to their numeric entities. To notice the behavior you should switch from Design to Html mode on the clientside - and you will notice that all entered values are numeric:

 

<telerik:radeditor id="RadEditor1" onclientload="OnClientLoad" runat="server">     
    <Content> content as Unicode: А Б В Г Д    
    <br />   
    Original content as numeric: &#1040; &#1041; &#1042; &#1043; &#1044;    
    <br />     
    </Content>   
</telerik:radeditor>   
   
<script type="text/javascript">    
    function OnClientLoad(editor, args)    
    {    
       editor.get_filtersManager().add(new RadEditorCustomFilter());    
    }    
    RadEditorCustomFilter = function()    
    {    
       RadEditorCustomFilter.initializeBase(this);    
       this.set_isDom(false);    
       this.set_enabled(true);    
       this.set_name("RadEditor filter");    
       this.set_description("RadEditor filter description");    
    }    
    RadEditorCustomFilter.prototype =    
    {    
       getHtmlContent : function(content)    
       {    
            //Make changes to the content and return it    
            //Convert all symbols to their numeric HTML entities    
            newContent = content.replace(/А/gi, "&#1040;");     
            newContent = newContent.replace(/Б/gi, "&#1041;");     
            newContent = newContent.replace(/В/gi, "&#1042;");     
            newContent = newContent.replace(/Г/gi, "&#1043;");     
            newContent = newContent.replace(/Д/gi, "&#1044;");     
            //Go ahead and add all letters. Note: this will likely cause a performance problem     
            //newContentnewContent = newContent.toUpperCase();    
         return newContent;    
       }  
    }    
    RadEditorCustomFilter.registerClass('RadEditorCustomFilter', Telerik.Web.UI.Editor.Filter);    
</script>   

Note: Since version Q1 2010 (version 2010.1.309), RadEditor offers a new ConvertCharactersToEntities content filter, which converts reserved characters to their html entity names. You can test it in the following live demo: Built-in Content Filters.

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.