Modifications after template insertion

[Yuri]

Hi All,
I was wondering if it is possible, after the user has selected a HTML template from the template manager control, to allow the user to edit only some portions of the imported HTML. I.e., if I import this simple table as a template

<table style="border: 1px solid #000000; width: 300px; height: 150px;">
  <tr>
    <td>Insert text here.</td>
  </tr>
 </table>

I'd like to make the user able to edit only the portion of HTML inside the <td> tag.
Any ideas?

Thanks so much,
Yuri

[Rumen]

Hello Yuri,

Please, see the following help article on the subject: Editable and Non-editable Areas.

Kind regards,
Rumen
the Telerik team

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

[Yuri]

Hi Rumen,
thanks for the prompt reply. Yes, that is exactly what I was looking for, but there is just an additional question. With 'unselectable' and 'contentEditable' attributes you can set everything 'untouchable' but I can still modify the area in CAPS:

-------------
<div style="BORDER: red 1px solid;" contentEditable="false" unselectable="on">Non Editable AREA
    <div style="BORDER: green 1px solid;" contentEditable="true" unselectable="off">
    <!--Content name="info" -->
        Editable REGION...
    <!--/Content -->
    </div>
    Non Editable AREA
</div>
I CAN WRITE HERE OR, WITH A BACKSPACE, DELETE ALL THE CONTENT IN 'DESIGN' EDIT MODE
-------------

Is there any method to prevent selection or modification for the whole RadEditor page except 'Editable Region' area?

Thanks so much.
Yuri

[Rumen]

Hi Yuri,

Here it is the requested example which prevents the user to type outside of the editable DIV element:

<script type="text/javascript">
function OnClientLoad(editor)
{
        var body = editor.get_document().body;
        body.setAttribute("unselectable", "on");
       
        var editableDIV = editor.get_document().getElementById("editableDIV1");
        editableDIV.onblur = function() {editableDIV.focus();}
}
</script>
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
<Content>
    <div style="BORDER: red 1px solid;height:100%;width:100%" contentEditable="false" unselectable="on">Non Editable AREA
    <div style="BORDER: green 1px solid;" id="editableDIV1" contentEditable="true" unselectable="off">
    <!--Content name="info" -->
        Editable REGION...
    <!--/Content -->
    </div>
    Non Editable AREA
</div>
</Content>
</telerik:RadEditor>

All the best,
Rumen
the Telerik team

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

[Yuri]

Hi Rumen,
thanks again for your reply.
Should I put your code in a template file and upload it with Template Manager control?

Best,
Yuri

[Rumen]

Hi Yuri,

You can directly load the HTML content from a database, external file or directly put it inside the Content tags of RadEditor.

I optimized the javascript code by register  the onblur event directly as an event attribute to the editable DIV:

<div style="BORDER: green 1px solid;" onblur="this.focus()" contentEditable="true" unselectable="off">

This helped me to remove the following two lines from the OnClientLoad function:

var editableDIV = editor.get_document().getElementById("editableDIV1");
editableDIV.onblur = function() {editableDIV.focus();}

Here is the complete solution:

<script type="text/javascript">
function OnClientLoad(editor)
{
        var body = editor.get_document().body;
        body.setAttribute("unselectable", "on");
}
</script>
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
<Content>
<div style="BORDER: red 1px solid;height:100%;width:100%" contentEditable="false" unselectable="on">Non Editable AREA
    <div style="BORDER: green 1px solid;" onblur="this.focus()" contentEditable="true" unselectable="off">
    <!--Content name="info" -->
        Editable REGION...
    <!--/Content -->
    </div>
    Non Editable AREA
</div>
</Content>
</telerik:RadEditor>

If you plan to use the Template manager to insert the HTML content in the editor's content area then you should not copy the javascript to the HTML template file. The javascript code just makes the content area unselectable so that the user could not click outside of the DIV.

All you need to do is paste the following content in the HTML file:

template.html

<div style="BORDER: red 1px solid;height:100%;width:100%" contentEditable="false" unselectable="on">Non Editable AREA
    <div style="BORDER: green 1px solid;" onblur="this.focus()" contentEditable="true" unselectable="off">
    <!--Content name="info" -->
        Editable REGION...
    <!--/Content -->
    </div>
    Non Editable AREA
</div>

Please, note that the editable DIV element has set onblur event attribute: onblur="this.focus()"

After that make the content area of RadEditor unselectable with the following script:
Default.aspx:

<script type="text/javascript">
function OnClientLoad(editor)
{
        var body = editor.get_document().body;
        body.setAttribute("unselectable", "on");
}
</script>
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server"></telerik:RadEditor>

Kind regards,
Rumen
the Telerik team

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