So I'm trying to write a very minimal web editor similar to codeMirror but much simpler with way less features and portability. Rather than discuss why I'm doing this I'd rather just receive some help.

The issue I'm having right now is that I can't seem to get the caret position using Javascript.

The DIV itself contains many <spans> (every character in the editor is in it's own <span>). If possible I'd like to be able to retrieve which particular <span> the current caret is in. Either a number indicating which <span> number it's in, or better yet would be to retrieve an attribute of that <span> such as it's id.

Any tips in the right direction would be immensely appreciated.

You talk about HTML code and an XPath problem, not a JavaScript-editor.

Could you just post the HTML in question so we could actually get an idea on the scope of your endeavour?

1 members found this post helpful.

Sure.

Lets say the Caret is in the #4 <span>, how would I get it's position?

You get the result either with XPath or, if you can verify the element-type each time, also with DOM.

I had to look up some of it, as my xpath and java-script knowledge is rusty. These pages are helpful:
http://javascript.info/tutorial/dom
https://developer.mozilla.org/en-US/..._in_JavaScript
https://developer.mozilla.org/en-US/docs/Web/XPath

In the example, I look explicitly for the fourth item.
With DOM, you will have to test for the element-type, before reading the content. In the following example, you could add a test against elements[4].nodeType or .tagName.

But it may be better to filter out the spans anyway and only then read the item of interest.

1 members found this post helpful.

I am not a javascript expert by any means, but I have written my share of javascript code.

I also acknowledge your desire not to discuss why you are writing such an editor, fair enough.

But I am more than a little curious as to why you would wrap every editable character in a separate <span/> element. It seems to me that this would make every edit operation far more difficult, and many impossible (think regex or other matches).

I am not saying it is "wrong", but am very curious why it is that way, and the answer is likely to bear directly on your caret position question.

1 members found this post helpful.

The function that I am using requires I give it a node, and then a string position in that node in order to set the caret (which is required after I run my syntax_update() function which defocuses that caret out of the div).

So to simplify things I give every character it's own node, so to set the caret position I can just set it to a specific character position. Unfortunately, this is the only function I've found that works in Firefox (probably should have mentioned that earlier) that will set the caret in a contenteditablediv that has html tags embedded.

Also, I know I take a performance hit making spans everywhere but the leading webeditor is codeMirror and it's a gargantuan monster. I figure no matter what I write it should be faster than codeMirror at the cost of being way less useful.

1 members found this post helpful.

Awesome. I'll dig into that and try some of it out. I'm not familiar at all with XPath. Some how the caret position is part of XPath?

K, off I go to read and attempt.

I will not claim to understand much of that or what it should accomplish. But is there a chance that you could just simply set the caret upon iterating a string? The JavaScript String has a charAt() method.

1 members found this post helpful.

How might I do that? And how would I deal with duplicates words in the editor?

OK, thanks for the explanation.

Now, I am at a loss, too. At one point in time, you should start developping. And that does not mean “write stuff on the computer which will do stuff”. Development means trial, error, reflection, chop firewood, get wet in the rain, come back, think again, trash your code, begin a new project, trash that, chop firewood, come back and do some random trials with code and see what ideas that may create. Development.

This code editor is part of a php frame work I am hoping to build. When fully done I hope to be able to edit and expand the framework by working actually inside of the webbrowser. My goal is to be completely os and software independent. I have over 300 personal work hours invested in it. This last and final piece of the frame work is the javascript editor which I have spent over 50 hours writing and re-writing over the past two weeks. It's a rather complicated thing to build as it's sort of pushing what Javascript is even capable of by working with a contentenditable div, that contains html tags inside of it to help with syntax coloring. Setting and getting the caret position is pretty straight forward I've learned if it's in a textarea, or if it's in an editable div without tags inside of it.

That's the challenge I'm having now. I have multiple posts in multiple places and most people just say "that's a really hard thing you are trying to accomplish, I'd just use codeEditor", so I thought I'd come to LQ and see if anyone had experience with it.

The scenario is getting more and more complex with each post. We outsiders cannot have the right responses for you, as long as we are not familiar with the context of your task at hand.

To iterate a string, you must have a string, first. In the scenario that we have seen in this thread, the string would be the text-node which is a child-node or “grand-child-node” of a div. You extract that one, then use the charAt() method to get the character at a numerical position.

To discern duplicate words, you must count occurrences of one and the same word and/or store them temporarily in a container of your choice. There are patterns defined for such occasions, but I have never implemented them in JavaScript. They are mostly about marking “already visited” items and you can look them up on the web. Also, I doubt that duplicate words are an issue, if the context that you have provided so far is all there is to consider. And as nothing appears to be sure and final, this may all be way too complicated and much more detailed than necessary.

Can you not just write some random HTML and get the javaScript code right prior integrating it in your project?

If not, this “tips in the right direction” - thing may be in urgent need of a foolproof definition.

I don't know, why I am thinking about that now. But I had once responded to a job-offer in Luxembourg, for an enterprise that would want to do stuff, that you do in Luxembourg, most of the time... They had this ingenuous idea of a new information platform for traders, and all the details had clearly been worked out already. All they needed now, was a developer who created it. (Darn! At that time, I had to cross half of Germany to get to the job-interview. This took some weeks to become funny.)

1 members found this post helpful.

Perhaps I wasn't transparent enough with my actual issue.

I need to know how to retrieve the caret (cursor) position from a contenteditable div that contains html tags inside of the div. I can make my through string manipulation well enough. For instance my syntax_update() function looks for specific characters contained within the element.textContent and then applies css styling around those characters, such as <? (php open tags). The tricky part is getting Javascript to give to me where exactly the cursor currently is in the div. I intentionally asked a very specific question because it's the only part I cannot seem to figure out on my own. So I was confused when you mentioned charAt as I thought you were saying charAt could somehow report to me the cursor position, which I don't believe it can, and that's why I asked how you might go about getting the cursor position from charAt.

I thank you anyways for taking a stab at the issue.

This looks related: http://stackoverflow.com/questions/4...g-html-content

1 members found this post helpful.