Change Pixel to Point size in RadEditor.

15 posts, 0 answers
  1. Jiten
    Jiten avatar
    57 posts
    Member since:
    Sep 2012

    Posted 24 Dec 2010 Link to this post

    Change the font pixels to point size.
    And after selecting the point size it automatically change into the pixels.
  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 24 Dec 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jiten
    Jiten avatar
    57 posts
    Member since:
    Sep 2012

    Posted 27 Dec 2010 Link to this post

    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.
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 27 Dec 2010 Link to this post

    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.
  6. Jiten
    Jiten avatar
    57 posts
    Member since:
    Sep 2012

    Posted 28 Dec 2010 Link to this post

    Thank you


    its work.

    thank you so much for your help.


    Best Regards
  7. Ross Presser
    Ross Presser avatar
    30 posts
    Member since:
    Dec 2008

    Posted 16 Apr 2014 in reply to Rumen Link to this post

    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. 
  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 21 Apr 2014 Link to this post

    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.

     
  9. Ross Presser
    Ross Presser avatar
    30 posts
    Member since:
    Dec 2008

    Posted 21 Apr 2014 in reply to Ianko Link to this post

    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.
  10. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 Apr 2014 Link to this post

    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.

     
  11. Ross Presser
    Ross Presser avatar
    30 posts
    Member since:
    Dec 2008

    Posted 22 Apr 2014 in reply to Ianko Link to this post

    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.
  12. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 25 Apr 2014 Link to this post

    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.

     
  13. Ross Presser
    Ross Presser avatar
    30 posts
    Member since:
    Dec 2008

    Posted 30 Apr 2014 in reply to Ianko Link to this post

    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.
  14. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 11 Sep in reply to Ianko Link to this post

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

  15. Guss
    Guss avatar
    26 posts
    Member since:
    Nov 2011

    Posted 11 Sep in reply to Guss Link to this post

    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 !
  16. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Sep Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017