The contenteditable feature is not working as per the instructions from Editable and Non-Editable Areas
<telerik:RadEditor runat="server" ID="Casenote" EditModes="Design">
<Content>
<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>
</Content>
</telerik:RadEditor>
Hi Fawad,
You can fix the problem using the following JavaScript code:
<script>
var utils = Telerik.Web.UI.Editor.Utils;
Telerik.Web.UI.RadEditor.prototype.executeCommand = function (radCommand, setFocus, addToStack) {
var isMobile = (this.get_renderMode() === Telerik.Web.UI.RenderMode.Mobile);
//Set the editor's window
if (!radCommand.get_window()) {
radCommand.set_window(this.get_contentWindow());
}
if (false != setFocus && !this.isOpera) {//Opera has a problem! Typing is discontinued.
// this.setFocus();
}
var title = radCommand.get_title();
if (isMobile) {
this._executeCommandEvent("commandExecuting", title);
}
this._commandsManager.execute(radCommand, addToStack);
if (isMobile) {
this._executeCommandEvent("commandExecuted", title);
}
}
Telerik.Web.UI.RadEditor.prototype._onKeyUp = function (e) {
this._clearInlineEditModeTabListener(e.keyCode);
this._cleanUpAfterDelete();
if (!this._shortcutHit && utils.isTypingKey(e)) {
// this._normalizeInsertedText();
}
//NEW UNDO/REDO
if (this._hasDeleteExecuted) {
//No such command when in IE back is called when selection is table or img
if (this._pendingTextTypeCmd)
this.executeCommand(this._pendingTextTypeCmd);
this._pendingTextTypeCmd = null; //!
this._hasDeleteExecuted = false;
return;
}
if (this._pendingTextTypeCmd) {
return;
}
if (this._pendingCutCommand) {
this.executeCommand(this._pendingCutCommand);
this._pendingCutCommand = null;
}
if (this._shortcutHit) {
return false;
}
this.raiseEvent("selectionChange", Sys.EventArgs.Empty);
}
</script>
<telerik:RadEditor runat="server" ID="Casenote">
<Content>
<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>
</Content>
</telerik:RadEditor>
Regards,
Rumen
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.