Alignment not working when use NewLineMode="Br" in Editor.

6 posts, 0 answers
  1. Amrut
    Amrut avatar
    17 posts
    Member since:
    Oct 2011

    Posted 23 Jul 2015 Link to this post

    Hello,

    I have come across a problem with the editor when set NewLineMode="Br" and try to align text..
    We have recently upgraded the telerik controls from V 2013 to V 2015.2.623.45.
    After upgrade new version that some functionality are messed up.

    When I type some text in the editor with enter then html will generate as below.

    test<br><br>test<br><br>test<br><br>test<br><br>test

     
    Now lets say the I want to set the alignment to center for the middle line of 
    text on Design mode

    Then this happens over HTML view:
    <p style="text-align: center;">test<br><br>test<br><br>test<br><br>test<br><br>test</p>

    Which of cause means that all the text is aligned to center
    However I just need centering the middle line which I had my cursor on.
    This can easily be reproduced on your demo site as well(Chrome and IE 11 browser).

    refer link : http://screencast.com/t/y4VEIHvlvM

    Is there any fix or workaround for this issue?

    Please suggest.
    Thanks.

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 Jul 2015 Link to this post

    Hello Amrut,

    This behavior is explained in details here—http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/changes-and-backwards-compatibility/inline-and-block-commands-behavior-change.

    This is expected as BR tags does not form a block element and alignment would work on the whole text.

    This is how text engines work and this is a major requirement for RadEditor. If you need each line to be treated as a block element it should be DIV or P. Therefore, you should change the NewLineMode property's value.

    If you want to test this outside RadEditor, you can use e.g., MS Word. To create lines that would act as BR tags, press Shift+Enter, this will form a plain carriage returns instead of paragraphs. You would see that the behavior is the same.

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amrut
    Amrut avatar
    17 posts
    Member since:
    Oct 2011

    Posted 29 Jul 2015 Link to this post

    Thanks Ianko for your reply,

     I have used below solution for fix above issue which works fine :

    Telerik.Web.UI.Editor.CommandList["JustifyRight"] = function(commandName, editor, args) {
                                                var oElem = editor.getSelectedElement();
                                                if (oElem && oElem.tagName == "DIV") {                                                
                                                    oElem.style.textAlign = "right";
                                                } else if (editor.getSelectionHtml())//There is some selection  
                                                {
                                                    
                                                    var toPaste = "<div  style='text-align: right'>" + editor.getSelectionHtml() + "</div>";
                                                    editor.pasteHtml(toPaste.trim());
      }
                                                    
                                            };

                                            Telerik.Web.UI.Editor.CommandList["JustifyLeft"] = function(commandName, editor, args) {
                                                var oElem = editor.getSelectedElement();

                                                if (oElem && oElem.tagName == "DIV") {
                                                   
                                                    oElem.style.textAlign = "left";
                                                } else if (editor.getSelectionHtml())//There is some selection  
                                                {
                                                 
                                                    var toPaste = "<div style='text-align: left'>" + editor.getSelectionHtml() + "</div>";
                                                    editor.pasteHtml(toPaste.trim());                                             
                                                }
                                            };  
                    
                                            Telerik.Web.UI.Editor.CommandList["JustifyCenter"] = function(commandName, editor, args) {
                                                var oElem = editor.getSelectedElement();
                                                if (oElem && oElem.tagName == "DIV") {                                                
                                                    oElem.style.textAlign = "center";
                                                } else if (editor.getSelectionHtml())//There is some selection  
                                                {
                                                 
                                                    var toPaste = "<div  style='text-align: center'>" + editor.getSelectionHtml() + "</div>";
                                                    editor.pasteHtml(toPaste.trim());                                             
                                                }
                                            };​

    But problem is when i select any content and set alignment first time like Right,left,center​ then selected content lost its focus.

    This only happened at first time. after select same content and set alignment then focus works fine.

     

    Please suggest. 
    Thanks.​

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 30 Jul 2015 Link to this post

    Hi Amrut,

    The pasteHtml() method has some over overload methods that can be used to instruct editor to select the element. You can find all possible arguments here—http://docs.telerik.com/devtools/aspnet-ajax/api/client/Telerik.Web.UI.RadEditor#methods-pasteHtml.

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Amrut
    Amrut avatar
    17 posts
    Member since:
    Oct 2011

    Posted 06 Aug 2015 Link to this post

    Thank you for your reply,

    I have facing another issue as below when use customized Telerik.Web.UI.Editor.CommandList event for alignment as above(posted on 29 july).

    When i select content(text) from multiple <td> and try to set alignment then all text are merged and append in first <td> with <p> tag.

    -> Steps to reproduce the issue.

    1 - Add table in Design mode with multiple <tr>,<td>

    2 - Add content(text) in all <td>

    3- Select all content(text) from <td>

    4- Try to align text center,right,left

    Result : All text are merged and append in first <td> with <p> tag.

    refer link : http://screencast.com/t/DTVrLcp1TL5F ​

    Please suggest.

    Thanks.

     

  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Aug 2015 Link to this post

    Hello Amrut,

    As the RadEditor is an XHTML editor, the output content is HTML. When it comes to alignment , HTML tables have a different mechanism for text aligning. Such an alignment is done via the Table properties in the module area, or via the Table/Cell Properties dialog.

    If you need to change the alignment of several cells, you should use the Cell Properties dialog, where you can hold the Ctrl key while selecting the cells in order to change their configuration.

    You can see some of the suggested options in this screencast—http://screencast.com/t/hEEisWjQodfA.

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017