Is it possible to create a div at the caret position of an editable div?

I’m basically trying to write a very basic yet highly functional code editor to integrate into a small PHP framework that I’ve written and I’m slowly pieces it all together.

I have code that will return to me the position where the caret is at, now I’d like to figure out how to make a div appear where ever the caret is. This div will house syntax completion data like variable names or functions, typical behaviour of a modern IDE.

Any ideas? I have a feeling it will involve some fancy CSS trickery but I’m not quite sure how to derive a top and left px position from the caret.

No point in reinventing the wheel when most likely one of these 25 will do the entire job for you - http://alternativeto.net/software/tinymce/

Those are all mostly just WYSIWYG editors for composing emails or rich text messages. I want full syntax completion, code coloring, auto formatting etc. The closest I have found is codeMirror but I can’t seem to get much help from the community and I can’t seem to read their manual and understand how I’m supposed to make it work, so I thought I’d just write my own.

Thanks for the suggestion though.

I’ve built a rich text editor in the past, it’s a pretty complicated component so it may be best finding a nice simple base component that you can build on top of.

This library seems to do what you are after: http://ichord.github.io/Caret.js/
Then it would just be creating an element with position: absolute over the top of the text editor at that position.

1 Like

That’s awesome. Thanks!

Also, I don’t mind complicated things but I find it rather pointless to be a programmer and have to settle for applications and work flows that don’t align with my preferences, so when possible I always give it a shot to see if I can do it first and in this case I’m not burning someone elses budget, just my own.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.