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

Delete Element Prevention

7 Answers 56 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Johnny-Anthony
Top achievements
Rank 1
Johnny-Anthony asked on 14 Apr 2010, 10:33 AM
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

7 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 14 Apr 2010, 04:19 PM
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.
0
Johnny-Anthony
Top achievements
Rank 1
answered on 14 Apr 2010, 06:38 PM
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
0
Rumen
Telerik team
answered on 15 Apr 2010, 12:35 PM
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.
0
Johnny-Anthony
Top achievements
Rank 1
answered on 15 Apr 2010, 01:53 PM
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
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 31 Jan 2019, 11:09 AM

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

0
Rumen
Telerik team
answered on 01 Feb 2019, 05:19 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 04 Feb 2019, 10:16 AM

Hi Rumen,

 

Really good stuff, this works like a charm!

Thanks for your quick response.

Marc

Tags
Editor
Asked by
Johnny-Anthony
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Johnny-Anthony
Top achievements
Rank 1
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or