This is a migrated thread and some comments may be shown as answers.

contentEditable="false" Internet Explorer and doctype

1 Answer 82 Views

Editor

This is a migrated thread and some comments may be shown as answers.

cheeves asked on 04 Nov 2011, 04:40 PM

Hi,
I'm trying to make a table non editable in the radeditor in ie8+, below is a sample of the content of the editor.
When I have a doctype in the content it is possible to edit everything, with out the doctyps it behaves as expected.
It would be great if you could help me figure out how to get the there a way to get contentEditable="false" functioning and include the doctype.

thanks

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.unselect{

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-o-user-select: none;

user-select: none;

}

</style>

</head>

<body class="A4" id="editorBody" style=

"background-image: url(/images/rightmargin.png); min-width: 170mm; padding-bottom: 5mm; min-height: 297mm; padding-left: 20mm; width: 170mm; padding-right: 20mm; background-repeat: repeat-y; background-position: 191mm 0mm; height: 100%; padding-top: 5mm;"

>

<span contenteditable="false" unselectable="on" class="unselect">

<table class="EmbeddedTable unselect" style="width: 210mm;" contenteditable="false" unselectable="on" cellpadding="3">

<colgroup><col style="text-align: left; width: 30mm; vertical-align: top;" />

<col style="text-align: left; width: 30mm; vertical-align: top;" />

<col style="text-align: left; width: 30mm; vertical-align: top;" />

<col style="text-align: left; width: 30mm; vertical-align: top;" />

<col style="text-align: left; width: 30mm; vertical-align: top;" />

<col style="text-align: left; width: 30mm; vertical-align: top;" />

<col style="text-align: left; width: 30mm; vertical-align: top;" />

</colgroup>

<thead class="unselect" style="font-style: normal; font-family: arial; font-size: 8pt; font-weight: bold; text-decoration: none;">

<tr>

<td class="unselect" style="text-align: center; width: 210mm; font-family: arial;" contenteditable="false" colspan="7" unselectable="on">

<p class="tableP unselect" style="text-align: center; font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>

</td>

</tr>

<tr>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>

</td>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>

</td>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>

</td>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>

</td>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold;" contenteditable="false" unselectable="on">not editable</p>

</td>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold;" contenteditable="false" unselectable="on">not editable</p>

</td>

<td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">

<p class="tableP unselect" style="font-weight: bold;" contenteditable="false" unselectable="on">not editable</p>

</td>

</tr>

</thead>

<tbody>

</tbody>

</table>

</span>

</body>

</html>

1 Answer, 1 is accepted

0

answered on 09 Nov 2011, 12:52 PM

Hi Cheeves,

The content area of RadEditor is a standard editable iframe and the observed issue is a browser behavior, which is fixed by the browser developers in IE9.

You can attach to the onclick event of the content area and check whether the selected element has contenteditable=false attribute or some custom id and disable the content area and the toolbar of RadEditor using the following two methods:





editor.enableEditing(false

);

editor.set_editable(false

);



More details are available in the following forum thread:

Delete Element Prevention.

All the best,
Rumen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

Tags

Editor

Asked by

Answers by