Insert smiley in a contenteditable div

Question

I had already tried:

I had asked these questions earlier on the stack overflow. But the answers that I got did not fit with my requirements.I want to insert smiley at the cursor position and in a contenteditable div. My Demo is on Demo . Smileys only insert at the end of the div and not at the cursor position. Also, I want to insert the smiley in whatever div I click. This functionality is already working but the smiley always get added at the end of the div. Plz help me this as I had already tried a lot of methods.

 $( document ).on( "click" , "#button" , function() {
     $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' );
 });

Note: I had a contenteditable div where I want to add image and not in the textarea.

score 2 · Accepted Answer · edited Oct 23 '18 at 02:40

2

This may help.

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection();
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.CreateElement("<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>");
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    sel.removeAllRanges();
    sel.addRange(range);        
}

edited Oct 23 '18 at 02:40

Pang

9,564
146
81
122

answered Jul 29 '15 at 04:12

prashant patil

319
2
13

can u add this in the fiddle and make it working. I am just a beginner in jquery @prashant patil – Amanjot Kaur Jul 29 '15 at 04:14
So, I guess there is no answer to this question @prashant patil – Amanjot Kaur Jul 29 '15 at 04:37
1

@Amanjot Kaur- i did some changes in you implementation u need to use buttons instead of span.... the updated demo is here https://jsfiddle.net/ftwbx88p/22/ ..... please vote up if atleast this helps you – prashant patil Jul 29 '15 at 04:39
The smiley is again inserting at the end – Amanjot Kaur Jul 29 '15 at 04:41
But why is the image is not showing @prashant patil – Amanjot Kaur Jul 29 '15 at 04:44
well thats the thing i am also worried about...... but yeah good news is that it is getting inserted at the cursor position as u wanted – prashant patil Jul 29 '15 at 04:45
yeah Thanks But I want to insert 20-30 images. so, do I have to write this code that number of times – Amanjot Kaur Jul 29 '15 at 04:48
Ok, it was the html syntax error. I got it working . https://jsfiddle.net/ftwbx88p/23/ – Amanjot Kaur Jul 29 '15 at 04:54
well you can use this single code with dynamically changing the link, i have hardcoded the link in the $(textNode).prop("src","src='https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png'/>'") instead of this u can us something like $(textNode).prop("src",VariableWhichYouCanAssignTheImageSource) and make the lines oof code which i specified as a different function and just pass the image sources to that function and use them in your jquery ........ – prashant patil Jul 29 '15 at 04:57
can u do this plz in the fiddle. I am just a beginner. So, dont know much about jquery. i had updated the fiddle at https://jsfiddle.net/ftwbx88p/24/ – Amanjot Kaur Jul 29 '15 at 05:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84527/discussion-between-prashant-patil-and-amanjot-kaur). – prashant patil Jul 29 '15 at 05:05
jsfiddle.net/ftwbx88p/25 :- Updated – prashant patil Jul 29 '15 at 05:20

Insert smiley in a contenteditable div

1 Answers1