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

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

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