EditorModes button labels

4 posts, 0 answers
  1. Dev
    Dev avatar
    2 posts
    Member since:
    Feb 2012

    Posted 24 Jan 2013 Link to this post

    How can editor mode tab buttons (preview, HTML, design) be changed in C# code?
    - Toggle label on the button
    - Change label text on button,
    - Toggle icon,
    - Change icon.
  2. Rumen
    Admin
    Rumen avatar
    14100 posts

    Posted 24 Jan 2013 Link to this post

    Hello,

    You can change the localization of the Design, HTML and Preview buttons using the following code

            RadEditor1.Localization.Main.RadEditorDesignMode = "test";
            RadEditor1.Localization.Main.RadEditorHtmlMode = "test";
            RadEditor1.Localization.Main.RadEditorPreviewMode = "test1";

    The icons are applied via sprite and they can be controlled only via CSS. You can see which css class to override in the following screenshot.

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Dev
    Dev avatar
    2 posts
    Member since:
    Feb 2012

    Posted 25 Jan 2013 Link to this post

    Thanks for the solution. It sort of works.
    Although if the text is removed, the icon dissapears. Also the button width is always the same.
    This is unwanted behaviour.

    How can I show only the icon, as you do in this sample:
    http://www.telerik.com/help/aspnet-ajax/editor-edit-modes.html
  4. Rumen
    Admin
    Rumen avatar
    14100 posts

    Posted 25 Jan 2013 Link to this post

    Hi,

    You can use the following CSS style to hide the text of the Design, HTML and Preview buttons:

    <style type="text/css">
        .reEditorModes a
        {
            width: 26px !important;
            overflow: hidden;
            border: solid 1px #ececec;
        }
        
        .reEditorModes a span
        {
            text-indent: -9999px;
        }
        
        a.reMode_selected
        {
            border: solid 1px #828282;
            background: none #cecece !important;
        }
        </style>

    Greetings,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top