DIV ID are removing in Editor after Indent.

[Jiten]

Hello,

The following are the div IDs which we bind in the editor control. But these div ids are removed when i click in the indent command.

<div id="VTL"></div>
<div id="D7"></div>
<div id="Med"></div>
<div id="Dia"></div>
<div id="Ord"></div>
<div id="Imm"></div>
<div id="D142"></div>

If DIV ID has data then DIV ID is not removed when click in the indent.

The following is the example of DIV ID has data:
<div id="All"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Allergies</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Drug Allergies:</span> <span style="font-size: 11pt; font-family: tahoma; color: #000000;">5-hydroxytryptophan (Generic: 5-hydroxytryptophan), Onset Date: 03/03/2011, Reaction: high, Intolerable.</span></span></div>

And I also used these code but no solution:

 <script type="text/javascript">
        function OnClientCommandExecuted(editor, args) {
            var commandName = args.get_commandName();
            var editorParentSelection = editor.getSelection().getParentElement();

            switch (commandName) {

                case "Indent":
                    var selectedElement = editor.getSelectedElement();

                    while (!Telerik.Web.UI.Editor.Utils.isEditorContentArea(selectedElement) && !(selectedElement.tagName.toLowerCase() == "blockquote")) {
                        selectedElement = selectedElement.parentNode;
                    }

                    var tempDiv = editor.get_document().createElement("div");
                    tempDiv.style.cssText = "margin-left:30px";
                    tempDiv.innerHTML = selectedElement.innerHTML;

                    selectedElement.parentNode.replaceChild(tempDiv, selectedElement);

                    break;

                case "Outdent":
                    editorParentSelection.outerHTML;
                    break;

                default:
                    break;
            }

        }
 
    </script>

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted">

    <Content>test</Content>

</telerik:RadEditor>

These is the major problem.

Please help me as soon as possible.
Thanks
Best Regards
Jiten Mutum

[Rumen]

Hello,

I tested the provided content

<div id="VTL"></div>
<div id="D7"></div>
<div id="Med"></div>
<div id="Dia"></div>
<div id="Ord"></div>
<div id="Imm"></div>
<div id="D142"></div>

in the editor in IE9 and I was unable to reproduce the reported problem in the Default Example. In Firefox I was unable to click before or in an empty DIV element.

Could you please specify under which browser do you experience the problem as well as record your steps with Jing or another screen capture tool and send a link to the video?

All the best,
Rumen
the Telerik team

[Jiten]

These are the div IDs before indent.

<div id="Chf"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Chief&nbsp;Complaints</span><span style="font-size: 11pt; font-family: arial; color: #000000;"><br />
The patient, Adam Nifa, is a 34 year  old Mariana Islander female who presents with acute pelvic pain. </span></span></div>
<br />
<div id="D6"></div>
<div id="Cur"></div>
<div id="D5"></div>
<div id="All"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Allergies</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Drug Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">A-25 (Generic: vitamin A), Onset Date: 01/28/2011, Reaction: highly reacting, Remarks: Perfect actions should be followed.</span></li>
</ul>
<br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Other Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">Type: Other Allergy, Dust, Reaction: sniffles.</span></li>
</ul>
</span></div>
<br />
<div id="VTL"></div>
<div id="D7"></div>
<div id="Med"></div>
<div id="Dia"></div>
<div id="Ord"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Orders&nbsp;And&nbsp;Procedures</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Surgery</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">1 Stg Prox Pen/Penoscrotal Hypspad Rpr (CPT Code:54332)</span></li>
</ul>
</span></div>
<br />
<div id="Imm"></div>
<div id="D142"></div>
<div id="LAB"></div>

and then
I Indent these two div IDs <div id="Chf"></div> and <div id="All"></div>. But between this div IDs there are three div IDs:
 <div id="D6"></div>
<div id="Cur"></div>
<div id="D5"></div>
These two div IDs(<div id="Chf"></div> and <div id="All"></div>) has data in the tag. Please see in the above which i given.
When i indent, these three div IDs:D6,Cur and D5 has been removed.
See this tags after indent:
<blockquote>
<div id="Chf"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Chief&nbsp;Complaints</span><span style="font-size: 11pt; font-family: arial; color: #000000;"><br />
The patient, Adam Nifa, is a 34 year  old Mariana Islander female who presents with acute pelvic pain. </span></span></div>
<br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Allergies</span><br />
<span style="color: #000000;">
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Drug Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">A-25 (Generic: vitamin A), Onset Date: 01/28/2011, Reaction: highly reacting, Remarks: Perfect actions should be followed.</span></li>
</ul>
</span></blockquote>
<div id="All"><span style="color: #000000;">
<br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Other Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">Type: Other Allergy, Dust, Reaction: sniffles.</span></li>
</ul>
</span></div>
<br />
<div id="VTL"></div>
<div id="D7"></div>
<div id="Med"></div>
<div id="Dia"></div>
<div id="Ord"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Orders&nbsp;And&nbsp;Procedures</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Surgery</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">1 Stg Prox Pen/Penoscrotal Hypspad Rpr (CPT Code:54332)</span></li>
</ul>
</span></div>
<br />
<div id="Imm"></div>
<div id="D142"></div>
<div id="LAB"></div>
Also, we want same order as DIV IDs(No changed). And this <blockquote> create problem in editor.
It's same problem in firefox or crome or IE
This is editor problem

So please reply as soon as possible.

Thanks

Jiten

[Rumen]

Hello,

I reproduced the problem only in Firefox, and verify that it is a problem of the browser's Indent command, because the issue occurs in other competitors' DHTML editors.

I was able to fix it by overriding the browser command using the following code:

  <script type="text/javascript">
      function OnClientCommandExecuted(editor, args) {
          var commandName = args.get_commandName();
          var editorParentSelection = editor.getSelection().getParentElement();

          switch (commandName) {

              case "Indent":
                  var selectedElement = editor.getSelectedElement();

                  while (!Telerik.Web.UI.Editor.Utils.isEditorContentArea(selectedElement) && !(selectedElement.tagName.toLowerCase() == "blockquote")) {
                      selectedElement = selectedElement.parentNode;
                  }

                  var tempDiv = editor.get_document().createElement("div");
                  tempDiv.style.cssText = "margin-left:30px";
                  tempDiv.innerHTML = selectedElement.innerHTML;

                  selectedElement.parentNode.replaceChild(tempDiv, selectedElement);

                  break;

              case "Outdent":
                  editorParentSelection.outerHTML;
                  break;

              default:
                  break;
          }

      }

    </script>
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted">
    <Content>test</Content>
</telerik:RadEditor>

Regards,
Rumen
the Telerik team

[Jiten]

Hello,

You are getting my point.
This is the totals divs before insent:
<div id="Chf"></div>
<div id="D6"></div>
<div id="Cur"></div>
<div id="D5"></div>
<div id="All"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Allergies</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Drug Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">A+D (Generic: vitamin A &amp; D topical), Onset Date: 07/16/2009, Reaction: over racting, Intolerable.</span></li>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">4-Way (Generic: phenylephrine nasal), Onset Date: 04/16/2008, Reaction: very high, Remarks: All possible methods should be applied.</span></li>
</ul>
<br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Other Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">Type: Food Allergy, Crustacean shellfish (e.g., crab, lobster, shrimp), Onset Date: 10/13/2009, Reaction: normal.</span></li>
</ul>
</span></div>
<br />
<div id="VTL"></div>(This Div ID is missing when indent)
<div id="D7"></div>(This Div ID is missing when indent)
<div id="Med"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Prescription</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: arial; color: #000000;">Medications Prescribed:</span><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;"> 12 Hour Nasal Decongestant 0.05% nasal spray: 2 nasal 2 times a day for 5 days, Refill:0.</span><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;"> 12 Hour Nasal 0.05% nasal spray: 2 nasal 2 times a day for 50 days, Refill:0.</span></span></div>
<br />
<div id="Dia"></div>
<div id="Ord"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Orders&nbsp;And&nbsp;Procedures</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Surgery</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">1 Stg Prnl Hypspad Rpr Req X10sv Dsj Skn Grf (CPT Code:54336)</span></li>
</ul>
</span></div>
<br />
<div id="Imm"></div>
<div id="D142"></div>
<div id="LAB"></div>

And after indent:

 

<div id="Chf"></div>
<div id="D6"></div>
<div id="Cur"></div>
<div id="D5"></div>
<blockquote>
<div id="All"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Allergies</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Drug Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">A+D (Generic: vitamin A &amp; D topical), Onset Date: 07/16/2009, Reaction: over racting, Intolerable.</span></li>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">4-Way (Generic: phenylephrine nasal), Onset Date: 04/16/2008, Reaction: very high, Remarks: All possible methods should be applied.</span></li>
</ul>
<br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Other Allergies:</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">Type: Food Allergy, Crustacean shellfish (e.g., crab, lobster, shrimp), Onset Date: 10/13/2009, Reaction: normal.</span></li>
</ul>
</span></div>
<br />
<div id="Med"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Prescription</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: arial; color: #000000;">Medications Prescribed:</span><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;"> 12 Hour Nasal Decongestant 0.05% nasal spray: 2 nasal 2 times a day for 5 days, Refill:0.</span><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;"> 12 Hour Nasal 0.05% nasal spray: 2 nasal 2 times a day for 50 days, Refill:0.</span></span></div>
</blockquote>
<br />
<div id="Dia"></div>
<div id="Ord"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Orders&nbsp;And&nbsp;Procedures</span><br />
<span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Surgery</span>
<ul>
    <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">1 Stg Prnl Hypspad Rpr Req X10sv Dsj Skn Grf (CPT Code:54336)</span></li>
</ul>
</span></div>
<br />
<div id="Imm"></div>
<div id="D142"></div>
<div id="LAB"></div>

Please compared these two tag and find out which div IDs missing.
The missing div IDs are in bold letter in above and also mention in bracket.

I need the solution immediately.
I tell you that this is the editor problem.

And the script which you reply is nothing to to because I already tested.
It is nothing work.

I start indent from the <div id="All"> and finished in this div<div id="Med">. These <div id="VTL"></div>
<div id="D7"></div> has not data in the div tag and these div ids contents between <div id="All"> and <div id="Med">.


Ok Mr. Rumen.

You understand?

Thanks

Jiten

[Rumen]

Hi,

I researched the problem further and verified that it is a browser behavior, which exists in Firefox and Chrome, but not in Internet Explorer.  The problem occurs not only in an editable DIV / IFRAME as shown in the following video http://screencast.com/t/pwNUIMMp1Egk, but also in our competitors' DHTML WYSIWYG editors. For your convenience I have attached my page with an editable div element so that you can test it and confirm that the id stripping is done by the Firefox browser, but not RadEditor.

Kind regards,
Rumen
the Telerik team

[Jiten]

Hello Rumen,

Don't you see DIV IDs missing After indent(<div style="margin-left: 40px;">), no ID here only DIV tag is there. I  used your page in FireFox.

Why it is not compatibility in Crome and FireFox. Nobody used the IE? I want compatibility in Crome and FireFox also.

Please see the output tag.
<div id="Chf"></div>
    <div id="D6"></div>
    <div id="Cur"></div>
    <div id="D5"></div>
    <div id="All"><span style="color: rgb(0, 0, 0);"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Allergies</span><br>
    <span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Drug Allergies:</span>
    <ul>
        <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">A+D (Generic: vitamin A &amp; D topical), Onset Date: 07/16/2009, Reaction: over racting, Intolerable.</span></li>
        <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">4-Way (Generic: phenylephrine nasal), Onset Date: 04/16/2008, Reaction: very high, Remarks: All possible methods should be applied.</span></li>
    </ul>
    <br>
    </span><div style="margin-left: 40px;"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Other Allergies:</span>
    <ul>
        <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">Type: Food Allergy, Crustacean shellfish (e.g., crab, lobster, shrimp), Onset Date: 10/13/2009, Reaction: normal.</span></li>
    </ul>
    </span><br></div></div>
    
    <div style="margin-left: 40px;">(This Div ID is missing when indent)
    </div><div style="margin-left: 40px;">(This Div ID is missing when indent)
    </div><div style="margin-left: 40px;" id="Med"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Prescription</span><br>
    <span style="font-size: 11pt; font-weight: bold; font-family: arial; color: #000000;">Medications Prescribed:</span><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;"> 12 Hour Nasal Decongestant 0.05% nasal spray: 2 nasal 2 times a day for 5 days, Refill:0.</span><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;"> 12 Hour Nasal 0.05% nasal spray: 2 nasal 2 times a day for 50 days, Refill:0.</span></span></div>
    <br>
    <div id="Dia"></div>
    <div id="Ord"><span style="color: #000000;"><span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Orders&nbsp;And&nbsp;Procedures</span><br>
    <span style="font-size: 11pt; font-weight: bold; font-family: tahoma; color: #000000;">Surgery</span>
    <ul>
        <li><span style="font-size: 11pt; font-family: tahoma; color: #000000;">1 Stg Prnl Hypspad Rpr Req X10sv Dsj Skn Grf (CPT Code:54336)</span></li>
    </ul>
    </span></div>
    <br>
    <div id="Imm"></div>
    <div id="D142"></div>
    <div id="LAB"></div>

Thanks

Jiten

[Rumen]

Hello,

My video is also captured in Firefox and as you can see that the DIV ids are stripped.

The rich text editing engines provided by the different browsers differ and their Indent commands behave differently and produce different content. I just showed you that this is a browser behavior which is not related to RadEditor and which can be reproduced in the provided editableDIV.zip page.

RadEditor uses the browser's Indend execCommand command to Indent the content. When the browser developers fix the id stripping problem the problem will disappear in RadEditor too.

Kind regards,
Rumen
the Telerik team