[Solved] Help with manipulating elements inside the editor with javascript

[Marc]

I have a small app that uses the radeditor. In it I insert pictures into the editor’s document by pasting some HTML using the pasteHTML method.

Wht I paste is normaly this image tag or similar one:

"<img alt="" id="Tempdivphoto0" src="PhotoFeeders/GetNewTempForumPostPhotoThumbNail.aspx?ForumPostTempPhotoIndex=0&amp;Time=1238702704906" />"

When the user submits the document, my application then has to change all the <img> tags that were pasted into <div> tags. I dothis in javascript with this small function:

The id of the <img> tag is in this: $find(element).get_TempID()

 

Posteditor is the clientID of the editor

if

 

 

($get($find(element).get_TempID(), $find(Posteditor).get_document()) != null) {

 

 

 

var temImg = $get($find(element).get_TempID(), $find(Posteditor).get_document());

 

 

 

var div = $find(Posteditor).get_document().createElement("div");

 

 

 

var uniqueIDv = this._UniqueID;

 

div.id = uniqueIDv + index.toString();

div.className =

 

'ForumPostPhotoDivCss';

 

$find(Posteditor).get_document().body.insertBefore(div, temImg);

$find(Posteditor).get_document().body.removeChild(temImg);

The problem I am having is this:

If the user only types some text and pastes images then the HTML of the editor looks something like this and all works fine:

this is a test<br />

<br />

<img alt="" id="Tempdivphoto0" src="PhotoFeeders/GetNewTempForumPostPhotoThumbNail.aspx?ForumPostTempPhotoIndex=0&amp;Time=1238702704906" />

 

However, if the user selects the entire content of the editor and decides to align it ‘centre’ then the HTML in the editor looks like this and it does not work because of the <p align="center"></p> tag surounding it.

<p align="center">this is a test<br />

<br />

<img alt="" id="Tempdivphoto0" src="PhotoFeeders/GetNewTempForumPostPhotoThumbNail.aspx?ForumPostTempPhotoIndex=0&amp;Time=1238702704906" /> </p>

The same problem occurs when the user selects the content of the editor and puts it in bold, then it wraps it up in these <strong></strong> tags an it also does not work.

 

<strong>this is a test<br />

<br />

<img alt="" id="Tempdivphoto0" src="PhotoFeeders/GetNewTempForumPostPhotoThumbNail.aspx?ForumPostTempPhotoIndex=0&amp;Time=1238702704906" /></strong>

The error is this line:

$find(Posteditor).get_document().body.insertBefore(div, temImg);

 

Where it says:

Error: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location: "http://localhost:1761/BCW_Web/Scripts/ForumsAJAX.js Line: 369"]

Source File: http://localhost:1761/BCW_Web/Scripts/ForumsAJAX.js

Line: 369

How can I reference the div and/or the image correctly when they are wraped inside <strong> or <div> tags?

[Tervel]

Hi Marc,

The problem is not with referencing an image or a div - you got those referenced correctly.
The problem is that you are trying to insert a child node in the wrong parent. The parent.insertBefore method requires that the parent is direct parent of the neighboring element.

So, in your case, when editor content is wrapped by another tag, the img is not a direct child of the body, but of the <p> or the <strong>.

You should change your code along the following lines:

temImg.parentNode.insertBefore(div, temImg);


Best wishes,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.