Rad Editor - Numbered Bullet list is not changing Size

[Venkadesh Babu]

Hi All,

I am using Telerik Rad Editor and facing an issue in bulleted number list font size. The bulleted numbers font size is not changing while change the font of size of text.

For example see the bulleted number font size is not matched with the text.

1. line 1
2. line 2
3. line 3

Suggest me to solve this issue. Thanks in advance.

- BABU

[Rumen]

Hello Babu,

You can use the code below to inspect the current selection and apply the font size to the selected <li> tag:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <ul>
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
        </ul>
    </Content>
</telerik:RadEditor>
<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;
            alert(parentElem);
            if (selElem.tagName == "LI") //if the select elem is LI tag
            {

                selElem.style.fontSize = args.get_value();

            }
            args.set_cancel(true);
        }
    }
</script>

This is a base code that you can further enhance to cover your custom scenario.

Kind regards,
Rumen
the Telerik team

[Venkadesh Babu]

Hi Rumen,

Thank you for your response,

As per your base code i have reproduced that in my application but its not working !.Instead of changing the all <LI> items it changes last <LI> item in the editor.for your refernce ..

Used

ToolsFile

 

 

="~/ToolFile/Mytools.xml"
and<tools name="DropdownToolbar"><tool name="FontSize" />

 

 

 

 

 

Step : 1(FontSize:3)

1. Line1
2. Line2
3. Line3
4. Line4
5. Line5

Now im changing the fontsize to 7 it does not reflected in the radeditor

Step : 2(FontSize:7)

1. Line1
2. Line2
3. Line3
4. Line4
5. Line5

Suggest me to solve this issue. Thanks in advance.

- BABU

[Dobromir]

Hi Venkadesh,

The provided sample code provided by Rumen modifies the behavior of the RealFontSize and FontSize tool to apply the value to the LI element instead. If I understand you correctly, you want to be able to apply font-size to the specific LI and to the whole UL / OL as well. To achieve this you need to further extend the function.

Also, since the mouse selection is not very accurate I would recommend you instruct the users to use the RadEditor's DOM Inspector module to properly select the required element.

The following is the modified funtion:

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;
        alert(parentElem);
        if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL")
        {
                selElem.style.fontSize = args.get_value();
        }
        args.set_cancel(true);
    }
}

In addition, the following video demonstrates the usage of DOM Inspector module:
http://screencast.com/t/tgLFnkUQJ

Kind regards,
Dobromir
the Telerik team

[Venkadesh Babu]

Hi Rumen,

Thank you for your response,

But when i tested your code on Firefox,chrome browsers its not working!,due to getSelectedElement(); not  selecting element..

var selElem = editor.getSelectedElement();
if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL")

        {

                selElem.style.fontSize = args.get_value();

        }

where selElem returns only body not LI tag.

Suggest me to solve this issue. Thanks in advance.

- BABU

[Rumen]

Hello Babu,

I tested the solution provided by Dobromir and it works as expected on my end in IE, Firefox and Chrome. You can see my test in the following video: http://screencast.com/t/MeD4js06s3FK.

What am I missing?

Greetings,
Rumen
the Telerik team

[Venkadesh Babu]

Hi Rumen,

Thank you for your response,

I have tested again your base code,working great in chrome.But when i tested same in IE 8 and Firefox 4 numbered bullet list is not changing Size .Please refer the link for issue reproducing.

http://www.2shared.com/video/ihT4cYAG/RadError.html

Suggest me to solve this issue. Thanks in advance.

- BABU

[Rumen]

Hello Venkadesh Babu,

I was unable to download the RadError video file because the provided site always throws the following error message:
User downloading session limit is reached. Please try again in few minutes.
regardless of elapsed time.

Could you please send the file to [e-mail] and notify me here when you send it?

Kind regards,
Rumen
the Telerik team

[arnaud]

Hi,

Same problem here but with the bullet point size.
The size of the bullet point does not change as you can see on the attached screenshots.

Example is based on :

UL
{
   
    padding-left: 30px;
    color: #413344;
    font: 12px Arial, Helvetica, sans-serif;
}

but can be reproduced on your 'First Look' démo

[Venkadesh Babu]

Hi Rumen,

Thank you for your response,

I have send you a mail along with video,kindly have a glance.

Suggest me to solve this issue. Thanks in advance.

- BABU

[Rumen]

Hi guys,

Babu,

I was able to fix the IE8 problem by updating the code, e.g.

<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>dasdd</li>
            <li>dasdas</li>
            <li>dasasd</li>
        </ol>
    </Content>
</telerik:RadEditor>

Here is a video demonstrating my test in the different browsers: http://screencast.com/t/suaTsIwxW.


Arnaud,
This is a browser behavior of Firefox, which is not reproducible in IE. The behavior is not reproducible with an editable DIV in Firefox too as shown in the following video http://screencast.com/t/3Ete7ahM. If this is a showstopper for you can configure the content area of RadEditor to be rendered as an editable DIV by setting ContentAreaMode="Div".

Greetings,
Rumen
the Telerik team

[Venkadesh Babu]

Hi Rumen,

Thank you so much,

I have tested again your base code,its working awesome in chrome, IE 8.I noticed that your using

<tool name="RealFontSize" />

 but as per my requirement im using 

<tool name="FontSize" />

When i use this numbering bullet size not reproducing as like realfontsize.

And also when i tested same in Firefox 4 numbered bullet list is not changing Size .

Kindly suggest me to solve this issue.

Thanks in advance.

- BABU

 

[Dobromir]

Hi Babu,

The problem comes from the fact that FontSize tool's value is number between 1 and 7 (standard font-size values for <font> element), and when applied as CSS property it is passed as pixels which is causing incorrect display. In order to use the FontSize tool with the customization provided by Rumen you need to convert the value returned by the tool into pixels.

For your convenience I have implemented such converter. Here is the new code:

<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 = fontSizeIntoPixels(args.get_value());
                }
                else selElem.style.fontSize = fontSizeIntoPixels(args.get_value());
            }
            args.set_cancel(true);
        }
    }

    function fontSizeIntoPixels(fsValue)
    {
        switch (fsValue)
        {
            case 1:
                return "10px";
                break;
            case 2:
                return "13px";
                break;
            case 3:
                return "16px";
                break;
            case 4:
                return "18px";
                break;
            case 5:
                return "24px";
                break;
            case 6:
                return "32px";
                break;
            case 7:
                return "48px";
                break;
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FontSize" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        <ol>
            <li>dasdd</li>
            <li>dasdas</li>
            <li>dasasd</li>
        </ol>
    </Content>
</telerik:RadEditor>

Greetings,
Dobromir
the Telerik team