Delete Element Prevention

[Johnny-Anthony]

Hello,

Is it possible to prevent a user from deleting a certain element in the editor, for example a div with id "placeHolder_something".
The way i think of it, is either by disabling events on that certain div, or detecting pressed keys corresponding to delete and check if the element is going to be deleted.
My goal is to have a template loaded in the editor, and i don't want a user to delete place holder element in the template.
How can i achieve this?

Thanks you

[Rumen]

Hi Johnny,

RadEditor does not offer the requested functionality out-of-the box and it is not easy to be fully achieved.

Nevertheless, this help article could be helpful for your scenario: Editable and Non-editable Areas.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Johnny-Anthony]

Thank you for your reply.
I saw this method, but it is not helpful for me because if i have something like, <div id="placeHolder">content</div>
I want content to be editable, but i don't the div with id="placeHolder" to be deleted.
I appreciate your help.
Thanks

[Rumen]

Hello Johnny,

Here is a base solution for checking whether the selected element has id placeholder and disable the toolbar and content area:

<script type="text/javascript">
    function onClientLoad(editor) {
        editor.attachEventHandler("onclick", EnableDisableEditing);

        function EnableDisableEditing() {
            var element = editor.getSelectedElement();

            if (element.getAttribute("id") == "placeHolder") {
                element.setAttribute("unselectable", "on");
                editor.enableEditing(false);
            }
            else {
                editor.enableEditing(true);
                editor.set_editable(true);
            }
        }
    }
</script>

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="onClientLoad">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    <Content>
        <div id="placeHolder" style="border: 3px solid red">non editable</div>
        some editable content
    </Content>
</telerik:RadEditor>

You can further enhance it by attaching to the keydown event and disable the typing and content deletion when needed.

Please, note that we do not support this code and it can has side effects.

Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Johnny-Anthony]

Thank you very much Rumen, i will try the code, i am trying as well the possibility for having an edit in place behavior, after the user edits the layout in the radeditor and clicks he will see the result layout where he can drag and drop elements into regions of the layout he created. this way i will not have to worry about the user deleting tags.
Thanks

[Fit2Page]

Hi Rumen,

 

I am adding some functionality in our CMS to protect users from deleting tags through the editor.

Your code works OK....but:

 

As far as I can see the JS which runs from the DOM Inspector RemoveElement does not take unselectable="on" into account.

So a user would still be able to delete tags with this module. Wouldn't it be good to take a look at this?

How could I change the code so that this would not happen?

Regards, Marc

[Rumen]

Hi there,

Here you are my solution on this request:

<script type="text/javascript">
    function OnClientLoad(editor) {
        editor.attachEventHandler("onclick", EnableDisableEditing);

        function EnableDisableEditing() {
            var element = editor.getSelectedElement();

            if (element.getAttribute("id") == "placeHolder") {
                element.setAttribute("unselectable", "on");
                editor.enableEditing(false);
            }
            else {
                editor.enableEditing(true);
                editor.set_editable(true);
            }
        }

                      //module override
        var $T = Telerik.Web.UI;
        var utils = $T.Editor.Utils;
        var $EditorModules = $T.Editor.Modules;
        var isTag = utils.isTag;

        if ($EditorModules && $EditorModules.RadEditorDomInspector) {

            $EditorModules.RadEditorDomInspector.prototype.removeSelectedElement = function (elem) {
                var editor = this.get_editor();
                var tag = function (name) { return isTag(elem, name); };
                var cmd;

                try {
                    if (elem.getAttribute("id") != "placeHolder") {
                        if (tag("TD") || tag("TH")) {
                            editor.fire("DeleteCell");
                        }
                        else if (tag("TR")) {
                            var cells = elem.getElementsByTagName("td");
                            if (cells.length) {
                                this.selectElement(cells[0]);
                                editor.fire("DeleteRow");
                            }
                        }
                        else if (tag("TABLE") || tag("TBODY") || tag("THEAD") || tag("TFOOT") ||
                            tag("EMBED") || tag("OBJECT") ||
                            tag("INPUT") ||
                            tag("IMG") ||
                            tag("HR")) {
                            cmd = new Telerik.Web.UI.Editor.GenericCommand(this._removeElementString, editor.get_contentWindow(), editor);
                            window.setTimeout(function () {
                                elem.parentNode.removeChild(elem);
                                editor.setFocus();
                                editor.executeCommand(cmd);
                                editor.raiseEvent("selectionChange");
                            }, 0);
                        }
                        else if (elem !== editor.get_contentArea()) {
                            cmd = new Telerik.Web.UI.Editor.GenericCommand(this._removeElementString, editor.get_contentWindow(), editor);
                            Telerik.Web.UI.Editor.Utils.removeNode(elem);
                            editor.setFocus();
                            editor.executeCommand(cmd);
                        }
                    }
                    else { alert("Non editable and deletable content!"); }
                }
                catch (ex) { }

                editor.raiseEvent("selectionChange");
            }
        }
    }


</script>

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    <Content>
<span id="placeHolder" style="border: 3px solid red">non editable</span>
<div style="border: 3px solid green">editable</div>
    </Content>
</telerik:RadEditor>

Regards,
Rumen
Progress Telerik

[Fit2Page]

Hi Rumen,

 

Really good stuff, this works like a charm!

Thanks for your quick response.

Marc