This is a migrated thread and some comments may be shown as answers.

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

5 Answers 146 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Amrut
Top achievements
Rank 1
Amrut asked on 23 Jul 2015, 09:00 AM

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.

5 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 28 Jul 2015, 05:27 AM
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
0
Amrut
Top achievements
Rank 1
answered on 29 Jul 2015, 02:08 PM

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.​

0
Ianko
Telerik team
answered on 30 Jul 2015, 05:04 AM
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
0
Amrut
Top achievements
Rank 1
answered on 06 Aug 2015, 11:53 AM

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.

 

0
Ianko
Telerik team
answered on 06 Aug 2015, 12:47 PM
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
Tags
General Discussions
Asked by
Amrut
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Amrut
Top achievements
Rank 1
Share this question
or