{"action":"created","issue":{"url":"https://api.github.com/repos/yuku-t/jquery-textcomplete/issues/105","labels_url":"https://api.github.com/repos/yuku-t/jquery-textcomplete/issues/105/labels{/name}","comments_url":"https://api.github.com/repos/yuku-t/jquery-textcomplete/issues/105/comments","events_url":"https://api.github.com/repos/yuku-t/jquery-textcomplete/issues/105/events","html_url":"https://github.com/yuku-t/jquery-textcomplete/issues/105","id":40417245,"number":105,"title":"Contenteditable - replace to insert html.","user":{"login":"andrejkaurin","id":157101,"avatar_url":"https://avatars.githubusercontent.com/u/157101?v=3","gravatar_id":"","url":"https://api.github.com/users/andrejkaurin","html_url":"https://github.com/andrejkaurin","followers_url":"https://api.github.com/users/andrejkaurin/followers","following_url":"https://api.github.com/users/andrejkaurin/following{/other_user}","gists_url":"https://api.github.com/users/andrejkaurin/gists{/gist_id}","starred_url":"https://api.github.com/users/andrejkaurin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrejkaurin/subscriptions","organizations_url":"https://api.github.com/users/andrejkaurin/orgs","repos_url":"https://api.github.com/users/andrejkaurin/repos","events_url":"https://api.github.com/users/andrejkaurin/events{/privacy}","received_events_url":"https://api.github.com/users/andrejkaurin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2014-08-16T18:24:01Z","updated_at":"2015-06-26T14:10:27Z","closed_at":null,"body":"How about having replace function to return something like this\r\n\r\nreplace: function (word) {\r\n            return '&lt;span style=\"background: #BBBBBB;color: #FFFFFF;\"&gt;' + word + '&lt;/span&gt;'\r\n        }\r\n\r\nIt currently inserts as code and not as html element into content editable."},"comment":{"url":"https://api.github.com/repos/yuku-t/jquery-textcomplete/issues/comments/115701922","html_url":"https://github.com/yuku-t/jquery-textcomplete/issues/105#issuecomment-115701922","issue_url":"https://api.github.com/repos/yuku-t/jquery-textcomplete/issues/105","id":115701922,"user":{"login":"hclarke3","id":806604,"avatar_url":"https://avatars.githubusercontent.com/u/806604?v=3","gravatar_id":"","url":"https://api.github.com/users/hclarke3","html_url":"https://github.com/hclarke3","followers_url":"https://api.github.com/users/hclarke3/followers","following_url":"https://api.github.com/users/hclarke3/following{/other_user}","gists_url":"https://api.github.com/users/hclarke3/gists{/gist_id}","starred_url":"https://api.github.com/users/hclarke3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hclarke3/subscriptions","organizations_url":"https://api.github.com/users/hclarke3/orgs","repos_url":"https://api.github.com/users/hclarke3/repos","events_url":"https://api.github.com/users/hclarke3/events{/privacy}","received_events_url":"https://api.github.com/users/hclarke3/received_events","type":"User","site_admin":false},"created_at":"2015-06-26T14:10:27Z","updated_at":"2015-06-26T14:10:27Z","body":"While the solutions above worked, they also allow the ability to execute html inline to the input area. So, for instance, you could type `<h1>Hello</h1>` and upon select a new header element would be inserted into the contenteditable element. I think I've managed to fix all of the hiccups with the function below if anyone is interested:\r\n\r\n```javascript\r\n// allow insertion of html elements\r\nif (this.el.isContentEditable) {\r\n  range.selectNodeContents(range.startContainer);\r\n  range.deleteContents();\r\n\r\n  var dummy = document.createElement('span');\r\n  dummy.innerHTML = '&nbsp;';\r\n  range.insertNode(dummy);\r\n\r\n  var fullText = pre + post;\r\n  var elIdx = fullText.indexOf(newSubstr);\r\n\r\n  // insertNode places nodes at the beginning of the range,\r\n  // so insert everything after the new node first\r\n  var postElTextNode = document.createTextNode(fullText.substr(elIdx + fullText.length + 1));\r\n  range.insertNode(postElTextNode);\r\n\r\n  // insert the new node\r\n  var node = range.createContextualFragment(newSubstr);\r\n  range.insertNode(node);\r\n\r\n  // insert everything before the new node\r\n  var preElTextNode = document.createTextNode(fullText.substr(0, elIdx));\r\n  range.insertNode(preElTextNode);\r\n\r\n  range.setStartAfter(dummy);\r\n  range.collapse(true);\r\n\r\n  sel.removeAllRanges();\r\n  sel.addRange(range);\r\n} else {\r\n    this.$el.val(pre + post);\r\n    this.el.selectionStart = this.el.selectionEnd = pre.length;\r\n}\r\n```"}}