I have a scenario using CKEDITOR where I want to delete an entire html tag (abbr).
If the user deletes any text inside that tag or presses backspace at the end of the tag (which would remove the last letter) or delete at the start of the tag (which would remove the first letter) the tag should be removed completly.
Basically I'm trying to simulate a template editor with fields that should be treated as a single entity and added and removed as such, ie. you cant change the text of the tag.
So far I can get the text and delete it as follows
var selection = editor.getSelection();
var element = selection.getStartElement();
if (element) // if currently inside a template element
element = element.getAscendant('abbr', true)
if (e.data.keyCode == "8" || e.data.keyCode == "46") {
if (element) {
element.remove() //remove the entire abbreviation
cancel = true;
} else if (element) { //stop the user from entering text into the abbreviation
cancel = true;
}
if (cancel)
e.cancel();
});
This seems to work quite well, however it only works if the cursor is inside the abbr tag.
ie. (assuming | represents the cursor)
this is some <abbr>abc1|23</abbr> text - **Works**
However if the cursor is outside of the abbr tag on the very end of the text it doesnt work (if the user hits delete or backspace), similarly to the start of the abbr tag (note: the tag itself is hidden by ckeditor just shown here to illustrate)
ie.
this is some |<abbr>abc123</abbr>| text - Doesn't Work
What is the best way to extend the selection and then search within that for the tag that I'm looking for here?