Font Size is not applying for all the text

3 posts, 0 answers
  1. Venkadesh Babu
    Venkadesh Babu avatar
    10 posts
    Member since:
    May 2011

    Posted 20 Jan 2012 Link to this post

    The following piece of code is used to increase bullet number size along with content.
    function OnClientCommandExecuting(editor, args) {
     
        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.style.fontSize = _fontSizesPx[parseInt(args.get_value() - 1)];
                args.set_cancel(true);
            }
        }
    }

    Like follows, the font size of bullet number increased along with content. Please the attachment Output1

      
    1. One
    2. Two
    3. Third
    4. Four

    I tried to apply the font size for overall content, but the font sized is applied only for the content and not for bullet/number.Refer the attachment Output2

    Suggest how to fix this issue?

  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 20 Jan 2012 Link to this post

    Venkadesh:

    In researching your issue, I noticed that you'd already solved this issue with insights from Telerik support:

    Rad Editor - Numbered Bullet list is not changing Size

    Is this the same application? Has something changed to break it?

    Please provide more insights.
  3. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 23 Jan 2012 Link to this post

    Hi,

    The implementation of your feature request is a very complex task, because there could be multiple different and nested elements in the selection and you should handle different scenarios. If you test the FontSize dropdown which is based on the browser's FontSize execCommand command, you will reproduce the same behavior, e.g. only the contents of the <li> tags is changed, without the numbers.

    If you would like to achieve your requirements, you should implement your own solution based on text ranges. You can create a text Range in RadEditor's content area using the following code:

    var currentRange = editor.getSelection().getRange(); 

    After that inspect the selection, get reference to the <li> tags and modify them.

    You can find additional information about the ranges in these articles:

    http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
    http://www.quirksmode.org/dom/range_intro.html
    http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx

    Note that this is a custom functionality, which is not offered by RadEditor out-of-the box and we do not support it.

    Best regards,
    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