Delete Element Prevention

8 posts, 0 answers
  1. Johnny-Anthony
    Johnny-Anthony avatar
    3 posts
    Member since:
    Oct 2009

    Posted 14 Apr 2010 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 14 Apr 2010 Link to this post

    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.
  3. Johnny-Anthony
    Johnny-Anthony avatar
    3 posts
    Member since:
    Oct 2009

    Posted 14 Apr 2010 Link to this post

    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
  4. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 15 Apr 2010 Link to this post

    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.
  5. Johnny-Anthony
    Johnny-Anthony avatar
    3 posts
    Member since:
    Oct 2009

    Posted 15 Apr 2010 Link to this post

    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
  6. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 31 Jan in reply to Rumen Link to this post

    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

  7. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 01 Feb Link to this post

    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.
  8. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 04 Feb in reply to Rumen Link to this post

    Hi Rumen,

     

    Really good stuff, this works like a charm!

    Thanks for your quick response.

    Marc

Back to Top