New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Numbered Bullet list is not updating size while changing the size of text in RadEditor

Environment

Product RadEditor for ASP.NET AJAX

Description

We are facing some issues while adding list items in RadEditor, if the default size is changed it changes the size of the text in the list item but it does not change the size of the numbers representing each list item.

<ol>
    <li><span style="font-size: 32px">line 1</span></li>
    <li><span style="font-size: 32px">line 2</span></li>
    <li><span style="font-size: 32px">line 3</span></li>
</ol>

Solution

This is the default browser behavior of the document.execCommand("FontSize") command to update only the ordered lists text without the shape (glyphs). This behavior can be observed in the following video I recorded for you Apply Font Size with execCommand to editable div element as well as in the competitors' HTML editors too.

The demo demonstrated in the video can be found at Editable IFRAME|DIV.

If you want to fine-tune the Fonts or RealFontSizes commands of RadEditor so that the font-size is applied to the list itself you can use the JS based solution provided below

<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        //The command name
        var commandName = args.get_commandName();

        if (commandName == "RealFontSize" || commandName == "FontSize") {
            var selElem = editor.getSelectedElement(); //get the selected element

            var parentElem = selElem.parentNode;

            if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL") {
                if ($telerik.isIE7 || $telerik.isIE8) {
                    selElem.parentNode.style.fontSize = args.get_value();
                }
                else selElem.style.fontSize = args.get_value();
            }
            args.set_cancel(true);
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" runat="server">
    <Content>
        <ol>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
        </ol>
    </Content>
</telerik:RadEditor>

You can find more detail in the Telerik AJAX forums:

In this article