How to find out if img-tag is left of the caret node in a html editor?

Question

I am using a html editor to edit content. Now i need to make sure a very special kind of element does not get deleted (images with a special class).

For the use cases of a non-collapsed selection/range with BACKSPACE, DELETE, CTRL + X/CMD + X i found a solution, but i am still looking for a solution to the case that the selection/range is not collapsed and the next Backspace will delete one of my special images.

How can i detect if the next Backspace/Delete will remove one of those img-tags ?

Example: CARET marks the caret/cursor position. If Backspace will be pushed next the image will get removed. How can i detect this case?

<p>Some Text <b>here <img class="my class" src="..."/></b>CARET some text</p>

You seem to have two cases to deal with: when the caret is to the right of the image, and when you have a non-empty selection. Are you interested in both? — Tim Down, Apr 24 '12 at 14:28
no, i got a working solution for the non-empty selection. the problem is the case when the caret is left/right of the image and Backspace/Delete could get pushed — Thariama, Apr 24 '12 at 14:29

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

For the case of checking whether the caret is next to an image, here's an answer of mine to a similar question. It relies on Rangy for IE < 9 support but can be trivially made to not rely on Rangy.

The answer only considers backspace but could easily be adapted to work for Delete as well.

https://stackoverflow.com/a/10020476/96100

edited May 23 '17 at 12:29

Community

1
1

answered Apr 24 '12 at 14:32

Tim Down

318,141
75
454
536

hmm, i do not know exactly what to do here - there can even be more than one of those img-tags. can you please describe a bit clearer what needs to be done? – Thariama Apr 24 '12 at 14:48
@Thariama: I'll look more closely later. By the way, you may not be able to prevent your images being deleted in all situations: some browsers have delete options on Edit and context menus that you won't be able to detect before it's too late. – Tim Down Apr 24 '12 at 14:59
i know about those special cases when i cannot detect anything (deletion and cutting using context menu), but fortunately i am able to blame the user in this case :) – Thariama Apr 24 '12 at 15:15
i am not able to get it working - can you have a closer look? – Thariama Apr 25 '12 at 12:42
@Thariama: Sorry, I really am planning to do something about this, but I'm struggling for time and keep forgetting. Maybe at the weekend. – Tim Down Apr 26 '12 at 23:50
i have been able to develop something of my own (using parts of your code). i will post my solution when i find the time – Thariama Apr 27 '12 at 07:11

score 1 · Accepted Answer · answered Apr 26 '12 at 09:31

The code below detects elements around caret with onkeyup (and onselectionchange), but it's for IE only. Maybe it can be "translated" to jQuery.

function detectClass(){
    var range, parentR, parentL;
    range = document.selection.createRange();
    range.moveStart('character',1);
    range.moveEnd('character',1);
    parentR = range.parentElement();
    range.moveStart('character',-2);
    range.moveEnd('character',-2);
    parentL = range.parentElement();
    if (parentR.className == 'special'){/* special on right */}
    if (parentL.className == 'special'){/* special on left */}
    return;
}

How to find out if img-tag is left of the caret node in a html editor?

2 Answers2