Align/Justify different on each line when using Non-Editable Content Areas

[Dan]

I have a fairly complicated scenario that I can't seem to sort out.  

We are using a RadEditor control to allow users to enter Text Ads in a fixed DIV area.  To do this we are setting up the Content area of the RadEditor something like this:

<Content>
    <div id="textContainer" contenteditable="false" unselectable="on">
        <div id="paddingContainer" contenteditable="false" unselectable="on">
            <div id="classifiedArea" contenteditable="true" unselectable="off">

    </div></div></div>
</Content>

In the code behind we set the allowed dimensions of the Div's.

When a User enters text, it looks something like this:

<div id="textContainer" contenteditable="false" unselectable="on">
     <div id="paddingContainer" contenteditable="false" unselectable="on">
          <div id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">
Line 1<br>Line 2<br>Etc
</div></div></div><!-- End -->

Then the user selects say the first Line and uses the Center Justify tool on the tool bar.

Problem - this justifies all of the lines!

Playing around, I found that if we change the NewLineMode to "P" or "Div" - then the Center Justify works as desired, but introduces a new problem.  It closes the contentEditable <div> tag, then replicates it for the new Div or P tag.  

Example:

<div id="textContainer" contenteditable="false" unselectable="on">
     <div id="paddingContainer" contenteditable="false" unselectable="on">
     <div id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">Line 1
</div>
<p id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">Line 2</p>
<p id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">Line 3</p>
</div></div>

This breaks things.

What I am trying to get it to do is insert <p> or <div> tags inside the editable <div> - without hijacking it.

I tried adding a fourth nested <div>, but no luck.  

Any help would be great.

Dan

[Ianko]

Hi Dan,

When lines are separated by BR tags it is expected for them to be considered as one block element and due to that to justify all together.

Please examine this help article for further information.

Regards,
Ianko
Telerik

 

 

[Dan]

Thanks Ianko.  I understand the Br vs. P behavior.

But if I set the New Line behavior to "P" or use the Toolbar option to insert a <p> - the new HTML tag first closes my <div> in the content template - then borrows all of its attributes.

<div id="textContainer" contenteditable="false" unselectable="on">
     <div id="paddingContainer" contenteditable="false" unselectable="on">
     <div id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">Line 1
</div>
<p id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">Line 2</p>
<p id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">Line 3</p>
</div></div>

But what I am trying to get this to do is to insert new <p> tags within the <div>, like this

<div id="textContainer" contenteditable="false" unselectable="on">
     <div id="paddingContainer" contenteditable="false" unselectable="on">
     <div id="classifiedArea" contenteditable="true" unselectable="off" style="width: 172.8px; font-family: HELVETICA; font-size: 14px; line-height: 22px; min-height: 22px;">
Line 1
<p>Line 2</p>
<p>Line 3</p>
</div></div></div>

[Ianko]

Hello Dan,

You are correct. This is due to the designed behavior of the new line insertion in the RadEditor. The editor is designed to add Br, P or Div elements in the content as new lines. When set to Div or P, every next line copies the stylization from the parent, so that it could introduce a more reliable text editing experience. Also due to the reason that the div element is also represented as a new line, there is no applicable approach to predict when the element is a container or a line. 

From the code provided I assume you are trying to use additional div containers to structure an HTML document. Note that the editor should act as a text editor and such HTML structuring is not possible via the design mode. Any HTML content should be implemented in the HTML mode, where the user is able to place suitable HTML content. 

As a possible solution I can suggest using a custom command and override the implemented Enter key behavior, although this is quite complex matter and achieving suitable logic would be a time consuming action. Nevertheless, you can achieve that buy following this start-up example:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>


<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["CustomInsertParagraph"] = function (commandName, editor, args) {
        // Implement the command to add the desired paragraphs.
    };

    function OnClientLoad(editor, args) {
        editor.addShortCut("CustomInsertParagraph", "Enter");
    }
</script>

 

Regards,
Ianko
Telerik

 

 

[Dan]

Thank you for the explanation and suggestion.  I will play around with that.

For now I have rearranged my Divs in the Content area - so that the selected/editable one is ok to copy when inserting lines as Div or P.