weird beheviour after removing an element from contentEditable

Question

I have some <div>'s with class=tgg inside the contentEditable <div> .

the <div>'s with class=tgg are also contentEditable (it is required).

The problem occurs when user removes that particular .tgg div's content. It seems like that div is removed; But after starting typing a span is created in chrome with same style as that of .tgg and wraps the typed text in it. which produces undesirable effects that should be avoided.

Here is My code:

HTML:

<div id="tarea" contentEditable="true" class="tarea" autocorrect="false" spellCheck="off">
<div class="tgg">Vedant Terkar</div> 
Creates another <div class="tgg">Fiddle</div> 
for all <div class='tgg'>SO</div> Users.

</div>

<textarea id="opc" rows="5" cols="97">
</textarea>

CSS:

.tarea{
    width:99%;
    height:300px;
    overflow:auto;
    clear:both;
    display:inline-block;
    border:1px solid #000;
    padding:5px;
    outline:none;
    color:#333;
    }
    .tarea .tgg{
    background:#99d;
    color:#fff;
    padding:1px;
    border:1px solid #77b; 
    display:inline-block;
    }

JS:

$(document).ready(function(){
    $("#tarea").keyup(function(e){
    var html=$(this).html().toString().trim();
    html=html.split("<br>").join("\n");
    html=html.split("&nbsp;").join(" ");
        $("#opc").val(html);
        $(this).find(".tgg").each(function(){
        $(this).attr("contenteditable","true");
        });
    });
    $("#tarea").trigger("keyup");
});

DEMO

Here is what I'm trying to say:

Here is output of the code as you can see: Orginal OP

When you put your cursor(caret) between fiddle and for and remove the fiddle using BackSpace or Del It is removed as follows:

working

But now if you start typing any thing it'll not be produced as plain text but it'll be inside a <span> like:

Problem

I'm using chrome. output may vary for different browser. Can anyone tell me how can i fix this problem? any suggestion is welcome. Thanks in advance :)!

It's up to the browser how it generates the elements. You fix one thing in one browser and it causes another unwanted behavior in other browsers. — Ram, Aug 04 '14 at 18:45
@undefined, thats true. Is there anyway to make it work uniformly for all browsers? if not can you please help me fixing this in chrome? — Vedant Terkar, Aug 04 '14 at 18:58

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

Try

$(document).ready(function(){
    $("#tarea").on("keyup", function(e){
    var html=$(this).html().toString().trim();
    html=html.split("<br>").join("\n");
    html=html.split("&nbsp;").join(" ");
        $("#opc").val(html);
        $(this).find(".tgg").each(function(){
        $(this).attr("contenteditable","true");
        });
        // replace `font` with `text` within `font`
        // TODO: change caret (cursor) position ,
        // following `replaceWith()` call ,
        // to position _after_ replaced element
        $("font").each(function(i, el) {
          $(el).replaceWith($(el).text());
        });        
    }).trigger("keyup");
});

jsfiddle http://jsfiddle.net/guest271314/h7h97/

See

How to move cursor to end of contenteditable entity

Set cursor position on contentEditable <div>

Get caret (cursor) position in contentEditable area containing HTML content

edited May 23 '17 at 10:26

Community

1
1

answered Aug 04 '14 at 20:49

guest271314

1
15
104
177

Thanks a lot mate :). this fixed that problem. But Can you please also make it work in FireFox? this isn't working there. +1 for efforts. – Vedant Terkar Aug 05 '14 at 04:53
That fixed it :)! Thanks. But can you please explain how can I make cursor work properly after `.replaceWith()` does its work? – Vedant Terkar Aug 07 '14 at 13:37
@VedantTerkar See links at post , `TODO`. Perhaps a useful and distinct Question in and of itself ? – guest271314 Aug 07 '14 at 14:44

weird beheviour after removing an element from contentEditable

1 Answers1