[Solved] Find a control placed in RadEditor

[Sambasiva]

Hi,

I have 4 paragraphs in my RadEditor which are placed in 4 diff <div> tags.
Like:
    <div id = "div1"> div1 content </div> <hr/>
    <div id = "div2"> div2 content </div> <hr/>
    <div id = "div3"> div3 content </div> <hr/>
    <div id = "div4"> div4 content </div> <hr/>

When i click a button lying out side the editor, i should be able to place the cursor in the begining of the 3rd paragraph. i.e, 3rd <div> tag.

Is there any possible way to achieve this functionality.

[Rumen]

Hello Sambasiva,

I would like to point that the requested feature is not supported out-of-the box by RadEditor and it is up to the developer to implement it using the underlying browser API.

Perhaps the best way is to implement this as a separate solution using an editable DIV element as the editor, e.g.:

<div contenteditable="true" style="1px solid red;width:300px;height:300px;">
    <div id = "div1"> div1 content </div> <hr/>
    <div id = "div2"> div2 content </div> <hr/>
    <div id = "div3"> div3 content </div> <hr/>
    <div id = "div4"> div4 content </div> <hr/>
</div>

If you are able to implement a fully functional solution using a standard editable DIV and the TextRange browser object, we will help you integrate it into the editor and use the editor content area as a source area.

Once you create a TextRange you will be able to use the following methods
duplicate(), move(), moveStart(), moveEnd() and select()
which will allow you to control the selection in the content area.


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sambasiva]

Hi Rumen,

Thanks for your quick reply. On button click, if i am able to find the <div> tag by using its id, it is comfortable to set the focus. 

It is very helpful if a solution is provided to find the <div> tag or any element from the radEditor?

Is there any way to get it done, becoz, i have two or three scenarios wherein i need to find an element from the radeditor and i should be able attach event handlers to it?

[Rumen]

Hello Sambasiva,

You can get a reference to the editor document with

var oDocument = editor.get_document(); //get a reference to the editor's document

and after that you will be able to use the browser API to access the desired HTML objects:

<telerik:RadEditor ID="RadEditor1" runat="server">
    <Content>
        <div contenteditable="true" style="1px solid red;width:300px;height:300px;">
            <div id = "div1"> div1 content </div> <hr/>
            <div id = "div2"> div2 content </div> <hr/>
            <div id = "div3"> div3 content </div> <hr/>
            <div id = "div4"> div4 content </div> <hr/>
        </div>
    </Content>
</telerik:RadEditor>
<br />
<input type="button" onclick="GetDiv();return false;" value="Get Div" />
<script type="text/javascript">
function GetDiv()
{
    var editor = $find("<%=RadEditor1.ClientID%>");//return a reference to RadEditor
    var oDocument = editor.get_document(); //get a reference to the editor's document
    var myDiv = oDocument.getElementById("div2");
    myDiv.style.border = "3px solid red";
}
</script>

Please, note that you should implement your scenario yourself, because it is not supported by RadEditor out-of-the box.
If you implement a fully functional solution using a standard editable DIV and the TextRange browser object, we will help you integrate it into the editor and use the editor content area as a source area.


Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sambasiva]

Hi Rumen,

Thanks allot for your reply. My requirement is to find the element from the content of the editor. I got it from the code given  by you. Will impliment the rest of the application.

Thank you again.

Best Regards