1

I have a contenteditable element with some nested spans to provide styling inside of it. I need to find out what the css classes are at any given offset of the elemebt. For example, I might have something like this:

<div contenteditable>
     <span class"nothing">    </span>
     <span class="outer">my <span class="other">name</span> is </span><span class="name">Andrew</span>
</div>

And the text on the screen will look like this (with appropriate styling):

my name is Andrew

Now, imagine that the contenteditable area could be much bigger and have many nested span elements. At any given Given an offset into the text, I need to be able to calculate the css classes that contain it.

For example, let's say I need that css styles at the offset 4, which is the n of name. I would expect the result to be:

outer other

An equivalent solution is that is if given an offset, (say 4), I can calculate the html element that is wrapping that location (in this case, it would be:

<span class="other">name</span>

I am using jquery, but no other libraries. How can I easily calculate this?

EDIT: I was using a textarea earlier, but that won't work. I should be using a contenteditable div element.

Andrew Eisenberg
  • 28,387
  • 9
  • 92
  • 148
  • Can you beef up your example? When you say calculate the css classes that contain it what do you mean? Count the number of instances of each css class? Give an example of an offset and apply it to your current example, what would be the intended output? – Jared Feb 02 '13 at 00:42
  • @Jrod, added a bit of an example. Hope more clear now. – Andrew Eisenberg Feb 02 '13 at 00:48
  • @Ohgodwhy, not much. I don't want to create my own scanner, but I'm afraid that's my best option so far. – Andrew Eisenberg Feb 02 '13 at 00:49

2 Answers2

2

I suggest inserting a temporary dummy span, grab it with Jquery, then ascend parents pushing the class list onto an array until you hit your outer container. Of course if you only want the currentStyle, that's even easier.

As to how to get your dummy span into the textarea, if you only have a character position, see Insert text into textarea at cursor position (Javascript). If you want to insert at the caret, see Insert text into textarea with jQuery.

Community
  • 1
  • 1
Plynx
  • 11,341
  • 3
  • 32
  • 33
  • Thanks for the answer, but all I have is an offset. How do I know where to place the dummy span? – Andrew Eisenberg Feb 02 '13 at 00:53
  • I'll try this out when I get a chance. – Andrew Eisenberg Feb 03 '13 at 21:21
  • Thanks. Finally got around to trying this out. In the end, I didn't implement exactly as you suggest, but your answeer lead me to my final solution. The structure of the content editable element is that each line has its own div element and then a series (of possibly nested spans). I just started with the line's div and walked the hierarchy until I found the element that I needed. Once there, I could ask for its css classes as well as all of its parents' css classes. – Andrew Eisenberg Feb 06 '13 at 19:24
  • @AndrewEisenberg Great! I've written these sorts of things before and it's no mean feat... I'm glad it worked! – Plynx Feb 06 '13 at 21:48
0

You can't do that with a textarea. Anything inside it will be considered text, not markup. You should look into "contenteditable" elements.

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
  • You're right. I should be using contenteditable. I changed the question so that I am using a contenteditable div element. But, I still do not know the way to solve this. – Andrew Eisenberg Feb 02 '13 at 05:08