Change Pixel to Point size in RadEditor.

[Jiten]

Change the font pixels to point size.
And after selecting the point size it automatically change into the pixels.

[Stanimir]

Hello Jiteni,

You can see the following help article Real Font Sizes which describes how to populate the dropdown with items in pixels and in points.



All the best,
Stanimir
the Telerik team

[Jiten]

I can add the realfontsize using
in (C#)
RTF1.RealFontSizes.Add("14pt");
            RTF1.RealFontSizes.Add("15pt");
            RTF1.RealFontSizes.Add("16pt");
            RTF1.RealFontSizes.Add("17pt");
            RTF1.RealFontSizes.Add("18pt");

or
in(.aspx)
<RealFontSizes>
                <telerik:EditorRealFontSize Value="14pt" />
                <telerik:EditorRealFontSize Value="15pt" />
                <telerik:EditorRealFontSize Value="16pt" />
                <telerik:EditorRealFontSize Value="17pt" />
                </RealFontSizes>

but

after selecting the realfontsize in the dropdownlist of RealFontSize,
we see the px not pt in the dropdownlist of RealFontSize.
i want to add point in the RealFontSize and show the point only not px.

[Rumen]

Hi Jiteni,

The information displayed in the RealFontSize dropdown header is returned by the browser's queryCommandValue method. Firefox, Safari and Chrome returns the font-size information in pixels. Internet Explorer returns the font-size in points. We do not plan for the time being to change the current mechanism of RealFontSize tool and to display in the dropdown header only values in pixels or points in all browsers because this could decrease the performance of the dropdown headers or introduce unwanted side effects.

What you can do in to enhance the code below which converts the pixel values to points. I found for you the following table that will be of great help for your scenario: Convert em,px,pt and % in css.

Here is the example

Copy Code

Copy Code

<script type="text/javascript">
function OnClientSelectionChange(editor, args)
{
    var tool = editor.getToolByName("RealFontSize");
     if (tool && !$telerik.isIE)
    {
            setTimeout(function()
            {
                var value = tool.get_value();

                switch(value)
                {
                case "16px":
                  value = value.replace("16px", "12pt");
                  break;
                case "34px":
                  value = value.replace("34px", "26pt");
                  break;
                case "48px":
                  value = value.replace("48px", "36pt");
                  break;
                }

                tool.set_value(value);
            }, 0);
    }
}
</script>
<telerik:RadEditor id="RadEditor1" runat="server" OnClientSelectionChange="OnClientSelectionChange">
    <RealFontSizes>
        <telerik:EditorRealFontSize Value="12pt" />
        <telerik:EditorRealFontSize Value="26pt" />
        <telerik:EditorRealFontSize Value="36pt" />
    </RealFontSizes>
    <Content>
        <span style="font-size: 26pt;">dasdasd</span>asdas <span style="font-size: 36pt;">dasdassdas </span>da<span style="font-size: 26pt;">sdasda</span>s
    </Content>
</telerik:RadEditor>

Please, note that this is just an example and you should complete it.

Best regards,
Rumen
the Telerik team

[Jiten]

Thank you


its work.

thank you so much for your help.


Best Regards

[Ross Presser]

This only fires when the selection changes through mouse or shift-arrow selection, or immediately after hitting Return. In ordinary typing, the pixel value continues to be shown. 

[Ianko]

Hi Ross,

Yes, this is so because the functionality is attached to the OnClientSelectionChange event.

You can customize further the editor's content area and attach it to the onkeydown event, but this would cause a performance issue and such action is not recommended.

Regards,
Ianko
Telerik

 

 

[Ross Presser]

It is a most annoying thing that this happens this way. Our customers absolutely do not care about pixels and never will. If this does not change within the next year, I can tell you they will demand that the Telerik Radeditor will be banished from our system.

[Ianko]

Hi Ross,

I am sorry to see that you are unhappy with the RadEditor tool's behavior.

I assume there has been some confusion among the posts and I would like to clarify that the mentioned thread is dated since the 21st of April 2010 year and the disunion is about the old behavior of the tool.

If you are using a more-recent version (later than 2014 Q1) of the Telerik UI for ASP.NET AJAX you could check that the same tool is showing only pixel values and it is not depended on the browser's return value of the used styles. 

This improvement and the decision for this tool to show only pixel values has been made due to major user requirement. Although in the latest available version of the RadEditor (2014 Q1 SP1) you can easily modify this behavior and force the RealFontSize to show only point values by using the following code example:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="RealFontSize" />
        </telerik:EditorToolGroup>
    </Tools>
    <RealFontSizes>
        <telerik:EditorRealFontSize Value="8pt" />
        <telerik:EditorRealFontSize Value="9pt" />
    </RealFontSizes>
</telerik:RadEditor>

<script type="text/javascript">
    var originalGetValue = Telerik.Web.UI.Editor.RealFontSize.prototype.getValue;

    Telerik.Web.UI.Editor.RealFontSize.prototype.getValue = function (wnd, range) {
        var originalresult = originalGetValue.call(this, wnd, range);
        var resultInPoints = Math.round(parseFloat(originalresult) / 1.33) + "pt";
        return resultInPoints;
    };
</script>

If it happens that you have further concerns, please open a proper support ticket with further details and information about the encountered issues,  so that we could correspondingly assist you further.

Regards,
Ianko
Telerik

 

 

[Ross Presser]

As I said before, your javascript only fires when the menu selection changes through mouse or shift-arrow selection, or immediately after hitting return. At ALL OTHER TIMES the pixel value is shown. Select 12pt from the menu and the selector reads 12pt; type "abc" and it immediately changes back to 15px. To get rid of it requires hooking the keydown event, which as you rightly point out has a big performance penalty.

Your script, furthermore, only works for WHOLE point values in the menu. If a value such as 10.5 needs to be in the menu, your javascript would incorrectly round it up to 11.

It's good that your team made a decision to unify the behavior regardless of browser, but the decision for "showing only pixel values" makes it completely UNwelcome for any application where the user is preparing a work for paper rather than screen.

[Ianko]

Hello Ross,

The provided approach is doing a Math.Round operation and you can safely remove it to provide a more accurate precision. 

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="RealFontSize" />
        </telerik:EditorToolGroup>
    </Tools>
    <RealFontSizes>
        <telerik:EditorRealFontSize Value="8pt" />
        <telerik:EditorRealFontSize Value="8.5pt" />
        <telerik:EditorRealFontSize Value="9pt" />
    </RealFontSizes>
</telerik:RadEditor>

<script type="text/javascript">
    var originalGetValue = Telerik.Web.UI.Editor.RealFontSize.prototype.getValue;

    Telerik.Web.UI.Editor.RealFontSize.prototype.getValue = function (wnd, range) {
        var originalresult = originalGetValue.call(this, wnd, range);
        var resultInPoints = (parseFloat(originalresult) / 1.33) + "pt";
        return resultInPoints;
    };
</script>

Although you should note, that this behavior is greatly dependent on the font-size value provided by the browser and if it returns an incorrect value there is no suitable approach with which modify it to a correct one in the Real Font Size dropdown.

Regards,
Ianko
Telerik

 

 

[Ross Presser]

I apologize! I did not notice the change from the OnClientSelectionChange approach to the getValue.prototype approach.  I will try this out, and I think it will be quite suitable.

[Guss]

Tx Telerik team. The last solution (prototype) works perfect without fault, making everything pt (point) from the original page load, right through the entire usage of the Editor.

Switching between pt and px (defaulting to one or the other) would be a very nice feature. I see the editor being used in two types of use cases a lot:

1) As and html editor (then yea, pixels (px) perfect)

2) As an email editor (points (pt) still the more mail client compatible route).

Ianko never came back, I assumed it worked for him aswell :-)

[Guss]

ah, and also... a feature like I achive with PreMail.Net (https://www.nuget.org/packages/PreMailer.Net/) shoud be a very nice addition in the future (taking css and making it inline). 
As you would know, that if you use any wysiwig html editor and send that html as email to a client , it is just chaos :-). 
If radEditor could spit out MHTML, that will be an hit !

[Ianko]

Hello Guss,

Both suggestions can be posted as features request in out feedback portal, which is the proper channel to suggest ideas, improvements and other useful feedback. 

As for the suggested MHTML features, this is HTML processing that can be done as a custom solution before programmatically sending an email. The PreMail.Net, however, is a plain CSS inliner tool. Such a situation — using CSS inliner with RadEditor — is also discussed here: http://www.telerik.com/forums/radeditor-for-html-emails#Q1a4MHKVKUGammALwYxR-g. 

Regards,
Ianko
Telerik by Progress