CODEWITHSUNDEEP
javascriptjqueryhtmlckeditor
Nobal Mohan
Nobal Mohan

Reputation: 486

How to delete inserted <span> on backspace?

Use case: I build a custom Acronym plugin for CKEditor. So user can either insert an acronym via dialog popup or select a text and convert it to acronym. In either case, I am adding a <span> for some custom styling and manipulation.

Something like this <span class="acronym">test</span>

Issue: In the editor after I insert an acronym. If I use backspace to delete, say I delete the closing </span> and start to type again. Everything get added to the acronym span.

Something like this <span class="acronym">test typing something

I am creating span as per CKEditor so its adding a closing </span> even if I delete it. So the cursor stay inside the span.

Is there a way to detect and delete the entire acronym span. if, either opening or closing span is deleted ?

Upvotes: 0

Views: 1851

Answers (2)

Reinmar
Reinmar

Reputation: 22023

Check out the Placeholder plugin. It's based on the widget system and you can easily build your own widget which will represent acronyms.

Upvotes: 1

Nobal Mohan
Nobal Mohan

Reputation: 486

Logic I used: On backspace key press, get the current element selected under cursor and check if its acronym element. If yes, delete. 

 $('html').keyup(function (e) {
    if (e.keyCode == 8) {
       var editor = CKEDITOR.instances.editable,
       sel = editor.getSelection();
       var ele = sel.getStartElement();
       if(ele.getAttribute( 'class' ) == 'acronym'){
          ele.remove();
       }
    }
 });

I can't use the placeholder plugin of CKEditor, as explained in the comment below.

Exploring for other options. Until then, accepting this as correct answer.

Upvotes: 0

Related Questions