0

I have a contenteditable div with a span inside it.The div is of type input. The div also contains a button in the right corner.When you click the button a popup menu shows a list of emoticons and when I click on an icon I need to add it to the cursor position in the div. I have looked at Tim Down's solutions but couldn't get it to work. Get caret (cursor) position in contentEditable area containing HTML content

and

Insert html at caret in a contenteditable div

The problem is that the div is not the only element on the page and is not necessarily on focus when user clicks on button to insert Emoticon. Also apart from the span tag the div may or may not contain text when the user clicks the button.

Any help to get the correct cursor position and insert the icon at the position is appreciated.

Community
  • 1
  • 1
zendev
  • 17
  • 2
  • Could you post your code? – Jonathan Newton Oct 11 '16 at 15:56
  • Your instinct to follow Tim Down is 100% correct - keep studying how he does things. I suspect your immediate problem is that when you click the button in the div the cursor position changes to the button, so you're trying to insertHTML in the wrong place. You need a method of logging the previous cursor position (again, see Tim Down's work) so that you can re-focus and then insertHTML at the correct position. However, this isn't straightforward - you will need lots of experimenting. – Tony Duffill Oct 11 '16 at 17:17
  • And I forgot to say... it may need concentration, but if I can do it, so can anyone (but only thanks to Tim Down). Alternatively, use his Rangy JS - it deals with this and many similar problems. – Tony Duffill Oct 11 '16 at 17:24
  • Thank you @JonathanNewton for replying. I was using Tim Down's solution http://stackoverflow.com/questions/4767848/get-caret-cursor-position-in-contenteditable-area-containing-html-content?noredirect=1&lq=1 and the html code was all generated dynamically so it was hard to paste the code. – zendev Oct 11 '16 at 23:17
  • Thanks @TonyDuffill. I was able to figure it out. Saved the cursor position on mousedown event and then updated the text after icon was selected from the menu. – zendev Oct 11 '16 at 23:20
  • And of course a big thank you to @TimDown. – zendev Oct 11 '16 at 23:21

0 Answers0