Cant align text after paste from word

[Stephen McCabe]

When I paste the following HTML from word without any format stripping into design mode, RadEditor will not allow me to allign the text left until I switch to HTML mode and back to design mode. It seems the filters are not being applied.

<P style="TEXT-ALIGN: center; MARGIN: 0cm 0cm 10pt" class=MsoNormal align=center><SPAN style="COLOR: #00b050"><FONT face=Calibri>This is an extremely sophisticated newsletter<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></FONT></SPAN></P>
<P style="TEXT-ALIGN: center; MARGIN: 0cm 0cm 10pt" class=MsoNormal align=center><SPAN style="COLOR: #00b050"><FONT face=Calibri>DOCUMENT<o:p></o:p></FONT></SPAN></P>
<P style="TEXT-ALIGN: center; MARGIN: 0cm 0cm 10pt" class=MsoNormal align=center><o:p><FONT face=Calibri> </FONT></o:p></P>

[Rumen]

Hello Stephen,

Here is an explanation why this behavior occurs:

The Justify tools of RadEditor execute the browser's execCommand method with the following parameters of the command identifiers: JustifyRight, JustifyLeft, JustifyCenter, which apply the inline HTML align:attribute with values left | right | center.

Since the align attribute has lower priority against the inline text-align css property the content is displayed in Design mode center justified even when the align attribute is set to left or right.

RadEditor uses the browser commands for text alignment because they work without problems and if we create our own implementation we risk to face a lot of problems in different scenarios with selections and to produce nested tags.

You can override the default behavior using the following approach:

Copy Code

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

<script type="text/javascript">
    function OnClientCommandExecuting(editor, args)
    {
        if (args.get_commandName() == "JustifyLeft"
            || args.get_commandName() == "JustifyRight"
            || args.get_commandName() == "JustifyCenter"
            || args.get_commandName() == "JustifyNone"
            || args.get_commandName() == "JustifyFull")
            {
                //cancels the default functionality
                args.set_cancel(true);

                var alignment = args.get_commandName().toLowerCase().replace("justify", "").replace("full", "justify");
                var output = "";
                //get current selection
                var currentSelection = editor.getSelection().getRange();
                var wrapper = document.createElement("DIV");

                if ($telerik.isIE)
                {
                    wrapper.innerHTML = currentSelection.htmlText;
                }
                else
                {
                    currentSelection.surroundContents(wrapper);
                }

                wrapper.style.textAlign = alignment;
                output = $telerik.getOuterHtml(wrapper);

                editor.pasteHtml(output);

            }
    }
</script>

Please, note that this is a basic implementation and you should enhance it to cover better your scenario.


Sincerely yours,
Rumen
the Telerik team

[Michael]

I've found the very same problem. The solution I'm using is to convert "text-align" styles into "align" attributes in the pasted content.
I share my code so it may be useful for others:

<telerik:RadEditor ID="Editor" runat="server" OnClientPasteHtml="onClientPasteHtml">
</telerik:RadEditor>

function onClientPasteHtml(sender, args) {
    var commandName = args.get_commandName()
    var value = args.get_value()
    if (commandName != null && commandName.toLowerCase() == "paste") {
        var newValue = value

        // Fix alignment
        var de = document.createElement("body")
        de.innerHTML = newValue

        de = FixAlign(de, "p")
        de = FixAlign(de, "div")
        newValue = de.innerHTML

        args.set_value(newValue)
    }
}

// Removes the text-align style from a specific tag and applies the align property instead
function FixAlign(doc, tagName) {
    var tags = doc.getElementsByTagName(tagName)
    for (var i = 0; tags != null && i < tags.length; i++) {
        var t = tags[i]
        var align = t.style.textAlign.toLowerCase()
        t.style.textAlign = ""
        if(align.length > 0 && t.align.toLowerCase() != align)
            t.align = align
    }

    return doc
}

Hope it helps
Mauro