[Solved] Align Text applies to several lines of content

[Kristian]

Hi

When I type som text in the editor and insert a <br /> like this

This is some text<br />

and this is some more text<br />

and we insert som more text again

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

Then this happends:
<p style="text-align: center;">This is some text<br />

and this is some more text<br />

and we insert som more text again </p>

Which of cause meas that all the text is aligned to center
However I am only interested in centering the middle line which I had my cursor on.
This can easily be reproduced on your demo site.

Is the any fix or workaround for this?
If not then please consider this as a feature request.

[Rumen]

Hi Kristian,

Please, see the following help article on the subject: Applying indentation or alignment per line.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Lindsay]

This solution works for maybe a content management system, but I'm working with an email system and this solution works for the browser - but when the user views the email in an email client - it shows way more space than there should be.

Is there a better solution than this??

[Roberto Plascencia]

I agree that this should be taken care of, soon, as it has been mention before, the solution explain in Applying indentation or alignment per line only solves half the problem (UI) while enlarging the real problem, since the output is now not only still having issues, but also inconsistent with what is being display in the editor.

I would really like to know if there if this issue will be address soon, and if not, at least some recommendations can be made to intended user about browser and settings.

[Rumen]

Hi guys,

Thank you for your feedback. We plan to enhance the indention and align functionality of RadEditor and this feature is logged in our ToDo list. It will be not implemented soon because to provide a 100% cross-browser support we will need more time for development and testing.

For the time being you can experiment with the following code which you can use as a base for custom implementation of the required functionality:

 <telerik:RadEditor ID="RadEditor1" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AlignRight" ShowText="true" Text="Aling Right" />
            <telerik:EditorTool Name="AlingLeft" ShowText="true"  Text="Aling Left" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["AlignRight"] = function(commandName, editor, args)
{
    var oElem = editor.getSelectedElement();

    if (oElem && oElem.tagName == "P")
    {
        oElem.setAttribute("dir","rtl");
        oElem.style.textAlign = "right";
    }
    else if (editor.getSelectionHtml())//There is some selection
    {

        var toPaste = "<p dir='rtl' style='text-align: right'>" + editor.getSelectionHtml() + "</p>";
        editor.pasteHtml(toPaste);
    }
}

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

    if (oElem && oElem.tagName == "P")
    {

            oElem.setAttribute("dir","ltr");
            oElem.style.textAlign = "left";
    }
    else if (editor.getSelectionHtml())//There is some selection
    {

        var toPaste = "<p dir='ltr' style='text-align: left'>" + editor.getSelectionHtml() + "</p>";
        editor.pasteHtml(toPaste);
    }
}
</script>

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.