RadEditor Mixing tags with same meaning.

[Brete]

RadEditor  v.21014.3.1024.40

I am having an issue with the Text Align Buttons.  

I am loading some html with <p align=''>  tags.  When I use the editor to change the alignment I am getting the original align element and a style element.  Which is causing some bad rendering when I use the html elsewhere.   


Original editor Content
<p align=\"center\">TEL: XXX-XXX-3465 &bull; WEB: <a href=\"http://www.wxxxxxxxxxxl.com\">www.wxxxxxxxxxx.com</a></p>



Editor Content after changing alignment to Left
<p align=\"center\" style=\"text-align: left;\">TEL: XXX-XXX-3465 &bull; WEB: <a href=\"http://www.wxxxxxxxxxx.com\">www.wxxxxxxxxxx.com</a></p>

See how it keep the align='center' and added style='text-align: left'  


I have the following Filters disabled.  
RadEditor2x.DisableFilter(EditorFilters.ConvertTags);
        RadEditor2x.DisableFilter(EditorFilters.ConvertFontToSpan);
        RadEditor2x.DisableFilter(EditorFilters.ConvertToXhtml);
        RadEditor2x.DisableFilter(EditorFilters.FixUlBoldItalic);
        RadEditor2x.DisableFilter(EditorFilters.MozEmStrong);
        RadEditor2x.DisableFilter(EditorFilters.ConvertInlineStylesToAttributes);



Is the a filter that i need to enable or disable that will correct this?  

Additionally, I would prefer that the alignments render as align = ' ' not style = ' '  

[Ianko]

Hi Brete,

The following custom solution demonstrates how to interact with the commands fired and modify the results as per to your expectations:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <p align="center">TEL: XXX-XXX-3465 • WEB: <a href="http://www.wxxxxxxxxxxl.com">www.wxxxxxxxxxx.com</a></p>
    </Content>
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientCommandExecuting(sender, args) {
        var commandName = args.get_commandName();
        var selElm = sender.getSelectedElement();

        console.log(commandName);
        switch (commandName) {
            case "JustifyLeft":
                selElm.align = "left";
                args.set_cancel(true);
                break;
            case "JustifyRight":
                selElm.align = "right";
                args.set_cancel(true);
                break;
            case "JustifyCenter":
                selElm.align = "center";
                args.set_cancel(true);
                break;
            case "JustifyNone":
                selElm.align = "";
                args.set_cancel(true);
                break;
            case "JustifyFull":
                selElm.align = "justify";
                args.set_cancel(true);
                break;
            default:
                break;
        }
    }
</script>

Let me know if I can help any further on the matter.

Regards,
Ianko
Telerik

 

 

[Brete]

 This solution has some issues.  After Postback the Align="xxxx" is being converted to style=\"text-align:xxx;\  on the client side.  

First Postback
<p Align="Right">xxxxxxxx</p>

Second Postback
<p  style=\"text-align:Right">xxxxxxxx</p>

Subsequent Alignment change
<p align=\"center\" style=\"text-align: Right;\">  
Leading back to the Original Problem of two alignments in the element.


Secondly it only works if the selected element is already a <p>.  



It appears to me that, if an element has an "Align = xxxx", changing the alignment via the button does not currently clear out the old alignment causing the element to have 2 alignments.    This only affects content as it is loaded.  On Postback the align="xxxx" is converted to style = "text-align = 'xxxx' ", unless an alignment command was applied on the client prior to postback.     The function below,  clears any old alignment setting prior to applying the new alignment.  


I am no longer concerned with which version of the alignment (align= or Style=)  and was able to fix the problem by changing your function as follows:



 function OnClientCommandExecuting(sender, args) {
           var commandName = args.get_commandName();
           var selElm = sender.getSelectedElement();
     
           console.log(commandName);
           switch (commandName) {
               case "JustifyLeft":
                   selElm.align = "";
              
                   break;
               case "JustifyRight":
                   selElm.align = "";
              
                   break;
               case "JustifyCenter":
                   selElm.align = "";
              
                   break;
               case "JustifyNone":
                   selElm.align = "";
           
                   break;
               case "JustifyFull":
                   selElm.align = "";
            
                   break;
               default:
                   break;
           }
       }

[Ianko]

Hi Brete,

In the first post there are some disabled filters. Make sure that they are indeed disabled.

On my end running the suggested solution works find with the filters disabled. You can examine also the attached page.

Regards,
Ianko
Telerik

 

 

[Brete]

The sample does work when the selElm contains a paragraph <p> some content .... </p>; however it does not work when the selElm does not contain an element that can be aligned.    

To test, start with empty content.  
Type any sentence   (Do not hit the Return).   Yes, hitting the return does add the <p> element, but people don't always hit return or NewLineBr=true could be applied.  
 
Select the words.  
Hit any alignment button.  

[Ianko]

Hello Brete,

If there is no element to which the alignment to be applied, then where the attribute should be added?

In such case I suggest you customizing further the suggested solution and add a statement that checks if there is a proper element which to be aligned. If such does not exist, add a P tag or any other DOM element that would fit your requirements to continue with the alignment.

Regards,
Ianko
Telerik