Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 19 Apr 2022 13:43 by ADMIN
ADMIN
Ianko
Created on: 16 Jan 2015 09:17
Category: Editor
Type: Feature Request
0
Improve font-size in lists to modify the bullet points along with the text nodes inside
In MS Word, if the entire list item is selected, changing the font-size will change the character's formatting too. While selecting only a text node (e.g., without highlighting) will not apply formatting to the list item.

In the RadEditor there is no option to somehow control the size of the bullet points. The only way is the user to switch to HTML mode and manually add font-size attribute in the <li> element.

It would be nice if there is a possibility to change the formatting similar to the editing experience in MS Word.
1 comment
ADMIN
Rumen
Posted on: 19 Apr 2022 13:43

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  http://youtu.be/JfJdmNq-OKg?hd=1 as well as in the competitors' HTML editors too.

The demo demonstrated in the video can be found at http://dojo.telerik.com/@nlazarov/IFIPAR.  

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 in the following forum thread on the matter:

Rad Editor - Numbered Bullet list is not changing Size. 

 

 

<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>list 1</li>
            <li>list 2</li>
            <li>list 3</li>
        </ol>
    </Content>
</telerik:RadEditor>

 

Create an account Log In
View
Type
Status
Category