More in this section

Forums / Developing with Sitefinity / Problem with Rad Editor

Problem with Rad Editor

2 posts, 0 answered
  1. Phani
    Phani avatar
    7 posts
    22 Apr 2009
    22 Apr 2009
    Link to this post
    Firstly we were trying to embed our custom styles to the Apply Css Tool Combo.

    This is approach we took to achive this:

    In EditorToolsFile.xml we added the following markup.

    <tools name="DropdownToolbar" dockable="false"
        <tool name="ApplyClass" /> 

    <cssFiles>    <item name="~/App_Themes/BeckDR/RadEditorStyles.css" /> </cssFiles>

    then contents of the above defined css file are


    By doing this we were successfull in getting these styles in the Apply Css styles combo.

    But now the problem is

    in the first line i entered some text and selected that text and selected Title in the apply Css come back to the end of the text and press [enter] key
    and type some other text in the second line and now select the content in the second line and apply some other style let it me highlight style from the Apply Css combo. the class is applied but the resultant markup generated by the editor is

    <span class="Title">Title</span> 
    <div><span class="Highlight" style="color: rgb(72, 87, 6); font-size: 18px; ">Highlight</span></div
    the style property should not be generated for the span which is wrapping the text Highlight.Because of which the Css Styles defined for the class are overrriden by the inline style applied which is incorrect.
    but ideally the expected markup should be

    <span class="Title">Title</span> 
    <div><span class="Highlight">Highlight</span></div

    Is there any workaround to overcome this situation that is no inline styles should be generated when [enter] is pressed.

    BTW i am using Sitefinity 3.6

  2. Parvan
    Parvan avatar
    151 posts
    24 Sep 2012
    28 Apr 2009
    Link to this post
    Hello Phani,

    One solution is to use RadEditor's Content Filters.
    You can remove the style attribute from the span elements.
    To do this you will need to add some javascript code in the file where the RadEditor is located.

    I made this for example in the ContentEditView.ascx template (attached in the post). It is used to edit items in Modules->Generic Content.

    You can easily add this to any other template where RadEditor control is used:
    1. Subscribe for the OnClientLoad event of the RadEditor:

    <telerik:RadEditor .. 
    OnClientLoad="OnClientLoad" ... 
    2. Add this javascript block to the template where RadEditor is edited:

    <script type="text/javascript"
        function OnClientLoad(editor, args) { 
            editor.get_filtersManager().add(new MyFilter()); 
        MyFilter = function() { 
            this.set_name("RadEditor filter"); 
            this.set_description("RadEditor filter description"); 
        MyFilter.prototype = 
        getHtmlContent: function(content) { 
            var newContent = content; 
            var regexpr = /style="[^"]+/ig; 
            newContent = content.replace(regexpr, ""); 
            return newContent; 
        getDesignContent: function(content) { 
            var newContent = content; 
            return newContent; 
        MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); 

    I hope this will help you.

    All the best,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal
    Check out the tips for optimizing your support resource searches.
2 posts, 0 answered