RadEditor - RealFontSize not working as expected

[Prashant]

I am using Rad Editor version -2010.3.1109.35.

According to my client requirement i need to create font sizes in pts.

For this i have made below changes (I am adding the RadEditor through code)

1.)In ToolsFile by adding "RealFontSize"

 <tools name="MainToolbar" enabled="true">
    <tool name="Bold" />
    <tool name="Italic" />
    <tool name="Underline" />
    <tool separator="true"/>
    <tool name="FontName" />
    <tool separator="true"/>
    <tool name="RealFontSize" />
    <tool separator="true"/>
    <tool name="ForeColor" />
  </tools>
 <realFontSizes>
    <item value="8pt"></item>
    <item value="9pt"></item>
    <item value="10pt"></item>
    <item value="11pt"></item>
    <item value="12pt"></item>
    <item value="14pt"></item>
    <item value="16pt"></item>
    <item value="18pt"></item>
    <item value="20pt"></item>
    <item value="22pt"></item>
    <item value="24pt"></item>
    <item value="26pt"></item>
    <item value="28pt"></item>
    <item value="36pt"></item>
    <item value="48pt"></item>
    <item value="72pt"></item>
  </realFontSizes>
2.)Added event   txtRichTextEditor.OnClientSelectionChange = "OnClientSelectionChange";
    To convert px to pts

   function OnClientSelectionChange(editor, args) {
              var tool = editor.getToolByName("RealFontSize");
            if (tool) {
                setTimeout(function () {
                    var toolval = tool.get_value();
                    if (toolval.indexOf("px") != -1) {
                        var pointval = Math.round(parseInt(toolval) * 0.75) + "pt";
                        tool.set_value(pointval);
                    }
                }, 0);
            }
        }
3.)Content area css file
body
{
   font-family: Arial !important;
   font-size: 14px !important;
   color: black !important;
   background-color: white !important;
   text-align: left !important;
}
blockquote
{
    margin-left:40px !important;
    margin-bottom:0px !important;
    margin-right:0px !important;
    margin-top:0px !important;
}

I have two issues here
1.)Font Size could not be selected beforehand in Chrome and Safari browsers
   NOTE: Able to chage pts in mozilla and IE for the first time with out entering any text in RadEditor
2.)On selecting the font size for the first time and clicking in Text editor the Font Size is getting changed to 12 pt in FF browser and 11 pt in I.E 10 browser
Ex :- Say select the Font Size 22 pt for the first time and click in Text editor. Observed that the Font Size is getting changed to 12 pt/11pt

How can the two issues i have mentioned above be fixed?
How to achieve proper working of RealFontSizes(in pts) in all the browsers(IE,Mozilla,Chrome & Safari)?

[Ianko]

Hi Prashant,

I tried to reproduce the described problems, but to no avail. You can find attached a sample project, which I have used to test the scenario and a clip showing the behavior on my end. Please review the materials and let me know if I am missing something of importance that could lead to the problematic behavior. 

Note that the mentioned version of RadControls (2010.3.1109.35)  has incompatibility issues with IE10. For this reason I would recommend you to upgrade to the latest version of RadControls, in which such browser problems should be fixed. Also, this could help you resolve the RealFontSizes issue.

Ianko
Telerik

[Prashant]

Thanks for the reply lanko

Highlighting text and then selecting Font size works fine in all browsers.

Please follow below steps to re-produce the 2 issues i have noted
1.)Font Size could not be selected beforehand in Chrome and Safari browsers
   NOTE: Able to chage pts in mozilla and IE for the first time with out entering any text in RadEditor

• After the RadEditor is loaded(In chrome browser) do not click on the text editor but directly try to change the font size to say 36pt .The font size will not be changed.(User should be able to set a font size initially to 36pt and then type text in size 36pt,but this cannot be done)
• Now click on RadEditor Text Area the default font i.e 11pt will be selected in fontsize drop down
• Now try to select font size 36pt in drop down which will not happen
• Enter some text as "test"
• See the HTML view .It has "test<span style="font-size: 36pt;"></span>" 
  NOTE: test comes outside the span tag

2.)On selecting the font size for the first time and clicking in Text editor the Font Size is getting changed to 12 pt in FF browser and 11 pt in I.E 10 browser

• After the RadEditor is loaded(In mozilla browser) do not click on the text editor but directly try to change the font size to say 36pt .The font size will be changed.
• Now click on text area of RadEditor the FontSize defaults to 11pt(which should not happen as i have changed to 36pt)
• Enter some text as "test"
• See the HTML view .It has "test<span style="font-size: 36pt;"></span>" 
  NOTE: test comes outside the span tag

Hope this will help you replicate the issues in your sample demo provided and let me know if you require any additional info.

Please give me solution/fix for these issues.

[Nikolay]

Hi Prashant,

Thank you for the detailed description.

I have investigated the issues and found out that there is a JavaScript error in the command's internal function which is raised when user apply the command without selection or clicking in the content area in Chrome and Safari browsers. It will be fixed for the official Q3 2013 release and the fix will also be available in the LIB next week.

Here is how you can overwrite the problematic function:

<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList._completeEditorSelection = function(editor, extraFontAttribute) {
        if (!extraFontAttribute) extraFontAttribute = "";
        var contentWindow = editor.get_contentWindow();
        var editorDocument = editor.get_document();
        var parentElement = editor.getSelection().getParentElement();
        var parentTag = parentElement ? parentElement.tagName : "";
        if ($telerik.isIE && !editor.getSelectionHtml() && (parentTag == "FONT" || parentTag == "SPAN")) {
            editorDocument.execCommand("RemoveFormat", null, false);
        }
        var editorSelection = editor.getSelection();
        editorSelection.pasteHtml("<font " + extraFontAttribute + " id='radERealFont'>​</font>");
        var oFont = editor.get_document().getElementById("radERealFont");
        oFont.removeAttribute("id");

        if ($telerik.isIE) {
            editor.selectElement(oFont);
            editor.getSelection().collapse();
            oFont.innerHTML = "";
        }
        else if (contentWindow.getSelection)
        {
            var oSel = contentWindow.getSelection();
            var range = editor.getSelection().getRange();
            oSel.removeAllRanges();
            if (!$telerik.isSafari)
                oFont.innerHTML = "";

            range.selectNodeContents(oFont);

            if (!$telerik.isSafari)
                range.collapse(false);

            oSel.addRange(range);
        }
    }
</script>

About the second problem, where the user applies the font size command and clicks somewhere on the content area, and the cursor goes out of the styled element - what happens in this case is that
1) an empty span element with the designated font size is inserted
2) when the user clicks somewhere in the area the cursor moves away from this element and it is not possible to get it back.
This is a browser bug and currently we do not have any solution or a workaround for it. 

Regards,
Nikolay
Telerik