Does not work with contenteditable

[garysieling]

Does not work with contenteditable

[mistic100]

The plugin has a very special approach because we can't put HTML in textarea, which is not the case with contenteditable elements.

Having the same functionnality in a contenteditable will require a totally different (and simplier) approach, which I won't implement in this plugin.

But it would be perfect in another one.

[mistic100]

"Simplier" is really an understatement, it would only constist on getting the content, stripping HTML tags, wrapping matches in a span.highlight and inject the new content, this on each "change" event.
No overly complicated (and buggy) wrappers, positioning, scrollbar calculators, etc.

[dm-coding]

Perhaps. I actually made some good headway towards implementing a highlightable contenteditable functionality separately from your library. I could perhaps have forked and submitted a pull request with this mostly separate functionality if it worked so that one library worked in both cases. However, my solution is unable to keep the caret in the right position; inserting the span.highlight into the contenteditable causes the caret to revert to the begining of the inserted span, which prevents what you suggest from being a viable option. After several days of unsuccessful hacking I came back to your library to try and make it work.. So I honestly think that if I modified your library, trying to get it to work with contenteditables is the best solution for me.

If I may ask, how is it that your overlayed div.highlighter is able to give focus to the underlying original textarea? If I intercepted focus events to div.highlighter overlaying contenteditables, do you think it work to then send focus to the contenteditable instead?

[mistic100]

it's this block which automatically transfer focus to the textarea (It's not mine, it comes from a fork)
https://github.com/mistic100/jQuery-highlightTextarea/blob/master/jquery.highlighttextarea.js#L182

I found tons on results on Google when searchching for get/set carret position in a contenteditable

[dm-coding]

Yes, I used the brilliant jquery.caret library for getting and setting caret position. Unfortunately it's unable to work when the contenteditable contains inner HTML of any kind.. I am lead to believe that is due to deficiencies in the browser's range API.. certainly I could not achieve the desired effect when I used a different caret library either. At the moment, as I say, it seems like modifying your library will be an easier solution for me than modifying a caret library to work with HTML inside a contenteditable. Thank you for your last reply. I will have a closer look at the focus stealer you reference on line 182 of your library and let you know if I have any success.