Prevent text deletion

Thu, 04/27/2006 - 12:11

#2

alexzr

Joined: 05/05/2006

Posts: 6

RE: Prevent text deletion

I was trying to protect some text by using contenteditable and unselectable attributes like below:
<span contenteditable="false" unselectable="on">some protected text</span>

this works fine, but if the cursor is positioned before the span tag and i hit the delete key, all the tag is deleted. it happens also if the cursor is after the tag a hit backspace
Any tips on how should i treat this, or where in the code i should look at?

Another question came up.
im using a div tag when i hit enter the another <div></div> is inserted on the code. Anyone knows where in the code this is treated?

Thu, 03/24/2011 - 12:04

#3

helmo̷

Joined: 24/03/2011

Posts: 84

Re: Prevent text deletion

I am also interested in this question - though I can't get it to work...

editor.on('key', function(e) {
  var selection = e.editor.getSelection();
  var ranges = selection.getRanges();
  if (ranges != null) {
    var range = ranges[0];
    if (range != null) {
      //Start and end of selection has to be in same node in order not to cancel the event...
      if (range.startContainer != null && range.endContainer != null &&
                  range.startContainer != range.endContainer) {
        //Cancel the event
        e.cancelBubble = true;
        e.returnValue = false;
        e.cancel();
        e.stop();
        return false;
      }
    }
  }
  return true;
} );

Mon, 04/04/2011 - 13:24

#4

helmo̷

Joined: 24/03/2011

Posts: 84

Re: Prevent text deletion

If anybody is interested - I fixed my problem:

            editor.on('key', function(e) {
                var selection = e.editor.getSelection();
                var ranges = selection.getRanges();
                if (ranges != null) {
                    var range = ranges[0];
                    if (range != null) {
                        range = range.clone();

                        var startNode = range.startContainer;
                        var endNode = range.endContainer;

                        var cancelEvent = false;

                        var pos = startNode.getPosition(endNode);
                        switch (pos) {
                            case CKEDITOR.POSITION_IDENTICAL: {
                                console.log("Key = " + e.data.keyCode);
                                switch (e.data.keyCode) {
                                    case 8: { //BACKSPACE
                                        if (range.startOffset == 0) {
                                            var ancestor = startNode.$.parentNode;
                                            while (ancestor != null) {
                                                var previous  = ancestor.previousSibling;
                                                if (previous != null) {
                                                    if ((new CKEDITOR.dom.node(previous)).isReadOnly()) {
//                                                        console.log("ReadOnly");
                                                        cancelEvent = true;
                                                        break;
                                                    }
                                                }
                                                ancestor = ancestor.parentNode;
                                            }
                                        }
                                        break;
                                    }
                                    case 46: { //DEL
                                        if (range.startOffset == startNode.getLength()) {
                                            var ancestor = endNode.$;
                                            while (ancestor != null) {
                                                var next  = ancestor.nextSibling;
                                                if (next != null) {
                                                    console.log("Next = " + next);
                                                    var node = new CKEDITOR.dom.node(next);
                                                    cancelEvent =  node.isReadOnly();
                                                    break;
                                                }
                                                ancestor = ancestor.parentNode;
                                            }
                                        }
                                        break;
                                    }
                                    default: {
                                        return true;
                                    }
                                }
                                break;
                            }
                            case CKEDITOR.POSITION_DISCONNECTED: {
                                console.log("*** Disconnected nodes?!? (This should not be possible in a selection?!?) - rejected!!!");
                                cancelEvent = true;
                                break;
                            }
                            case CKEDITOR.POSITION_PRECEDING: {
                                var temp = startNode.getParent();
                                while (temp != null && temp.$ != endNode.getParent().$) {
                                    if (isReadOnlyTree(temp)) {
                                        cancelEvent = true;
                                        break;
                                    }
                                    temp = temp.getNext();
                                }
                                break;
                            }
                            default : {
                                console.log("*** Not handled case???" + pos);
                                break;
                            }
                        }

                        if (cancelEvent) {
//                                console.log("*** Canceling event...");

                            //Cancel the event
                            e.cancelBubble = true;
                            e.returnValue = false;
                            e.cancel();
                            e.stop();
                            return false;
                        }
                    }
                }
                return true;
            } );

And a helper function:

            function isReadOnlyTree(node) {
                if (node.type == CKEDITOR.NODE_ELEMENT) {
                    var childs = node.$.childNodes;
                    for ( var i=0; i < childs.length; i++ )
                        if (isReadOnlyTree(new CKEDITOR.dom.node(childs[ i ]))) {
                            return true;
                        }
                    return false;
                } else if (node.type == CKEDITOR.NODE_TEXT) {
                    return node.isReadOnly();
                } else {
                    return false;
                }
            }

The code above tests if the selection contains a ReadOnly element and tests when backspace or Delete is pressed that the preceding or following element is not ReadOnly..

Tue, 01/17/2012 - 15:14

#5

popism

Joined: 17/01/2012

Posts: 2

Re: Prevent text deletion

this is what i'm looking for..thanks

Wed, 01/18/2012 - 09:59

#6

alhoseany

Joined: 06/01/2012

Posts: 4

Re: Prevent text deletion

thank you so much.
but where to put that code and how to use it?

Thu, 03/29/2012 - 22:05

#7

igorien2k

Joined: 29/03/2012

Posts: 10

Re: Prevent text deletion

This sort of works. If the protected section is inside a large selection of editable content, then it gets deleted anyway. I'm working on a fix for it. Does it make sense to remove the editable content, but leave the protected node intact?

Tue, 11/18/2014 - 11:51

#8

Rohan Anand

Joined: 18/11/2014

Posts: 1

Hi

I am working on the same issue for the CKEditor and not able to find the code working.

I have used the code given by @Helmo. Not able to fix in chrome and fireforx browser.

Plz help me out.

Thanks in advance

Rohan