RadEditor Mixing tags with same meaning.

6 posts, 0 answers
  1. Brete
    Brete avatar
    33 posts
    Member since:
    Feb 2008

    Posted 20 Jan 2015 Link to this post

    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 = ' '  

















  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 23 Jan 2015 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brete
    Brete avatar
    33 posts
    Member since:
    Feb 2008

    Posted 23 Jan 2015 in reply to Ianko Link to this post

     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;
               }
           }


























  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 Jan 2015 Link to this post

    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
     

    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.

     
  6. Brete
    Brete avatar
    33 posts
    Member since:
    Feb 2008

    Posted 28 Jan 2015 in reply to Ianko Link to this post

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

    Posted 02 Feb 2015 Link to this post

    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
     

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017