This is a migrated thread and some comments may be shown as answers.

Change Pixel to Point size in RadEditor.

14 Answers 527 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jiten
Top achievements
Rank 1
Jiten asked on 24 Dec 2010, 10:06 AM
Change the font pixels to point size.
And after selecting the point size it automatically change into the pixels.

14 Answers, 1 is accepted

Sort by
0
Stanimir
Telerik team
answered on 24 Dec 2010, 12:22 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Jiten
Top achievements
Rank 1
answered on 27 Dec 2010, 07:22 AM
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.
0
Rumen
Telerik team
answered on 27 Dec 2010, 05:13 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Jiten
Top achievements
Rank 1
answered on 28 Dec 2010, 09:45 AM
Thank you


its work.

thank you so much for your help.


Best Regards
0
Ross Presser
Top achievements
Rank 1
answered on 16 Apr 2014, 11:36 PM
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. 
0
Ianko
Telerik team
answered on 21 Apr 2014, 08:21 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ross Presser
Top achievements
Rank 1
answered on 21 Apr 2014, 02:46 PM
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.
0
Ianko
Telerik team
answered on 22 Apr 2014, 02:57 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ross Presser
Top achievements
Rank 1
answered on 22 Apr 2014, 09:59 PM
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.
0
Ianko
Telerik team
answered on 25 Apr 2014, 06:42 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ross Presser
Top achievements
Rank 1
answered on 30 Apr 2014, 02:51 PM
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.
0
Guss
Top achievements
Rank 2
Veteran
answered on 11 Sep 2016, 10:57 AM

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 :-)

0
Guss
Top achievements
Rank 2
Veteran
answered on 11 Sep 2016, 11:03 AM
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 !
0
Ianko
Telerik team
answered on 12 Sep 2016, 06:19 AM

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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Editor
Asked by
Jiten
Top achievements
Rank 1
Answers by
Stanimir
Telerik team
Jiten
Top achievements
Rank 1
Rumen
Telerik team
Ross Presser
Top achievements
Rank 1
Ianko
Telerik team
Guss
Top achievements
Rank 2
Veteran
Share this question
or