Completed
Last Updated: 11 Aug 2021 16:15 by ADMIN
Fawad
Created on: 10 May 2021 09:41
Category: Editor
Type: Bug Report
0
Editable and Non-Editable Areas not working

The contenteditable feature is not working as per the instructions from Editable and Non-Editable Areas

Reproduction

<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>

1 comment
ADMIN
Rumen
Posted on: 11 Aug 2021 16:15

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.