7

In an html page you might have some code with two paragraphs like this:

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

and very simply, these two tags would render like this:

The first paragraph

The second paragraph

What I am interested in is to allow the user to click somewhere in the rendered html code so as to insert a new element with JQuery. For example if I click between the letter i and the letter r (just a click, no higlighting/selection)in the word f*ir*st found in the first paragraph, I would be able to insert a custom span element or whatever I like exactly in that position in the HTML code resulting in something like this:

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

Any ideas that can help me? My request excludes absolute positioning. That would not solve my issues.

prince
  • 671
  • 2
  • 11
  • 26
  • 2
    What do you mean click i *and* r, do you just mean clicking between, or highlighting? – Loktar Aug 30 '11 at 12:36
  • Does it matter if the HTML contains a separate span for each letter? That would make things easier. – pimvdb Aug 30 '11 at 12:43
  • I mean clicking between i and r. No selection just a click. A separate span for each letter is unfeasible. – prince Aug 30 '11 at 13:11

3 Answers3

2

This is dirty but makes use of contenteditable: http://jsfiddle.net/Jj9Mp/.

$('div').click(function(e) {
    $('div').attr('contenteditable', true);
    document.execCommand("InsertHTML", false, "<span class=red>!</span>")
    e.stopPropagation();
});

$(':not(div)').click(function(e) {
    if($(this).parents('div').length === 0) {
        $('div').attr('contenteditable', false);
    } else {
        $('div').click();
    }
    e.stopPropagation();
});
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • +1 nice! But, unfortunately, it's a bit buggy. You often can erase big portions of text or even replace letters :( – gion_13 Aug 30 '11 at 13:31
  • @gion_13: It does not work for selections; it will overwrite the text in that case. But as I said, this isn't a very good solution either. – pimvdb Aug 30 '11 at 13:37
  • The problem is that I want to delay insertion. e.g. I click between the i and r in first now, but I insert a span inside there later... – prince Aug 30 '11 at 14:03
  • @prince: So you want to save the cursor position and use that position later? – pimvdb Aug 30 '11 at 14:42
  • @pimvdb: yes exactly - not immediately. Basically the user will highlight some text later and I will use that highlighted text to create an internal link in the recorded position that will take me to the highlighted text. – prince Aug 30 '11 at 17:23
2

Here is my solution : http://jsfiddle.net/gion_13/L6aeT/
It works by calculating the actual size (in px) of the string.

gion_13
  • 41,171
  • 10
  • 96
  • 108
  • The solution you provide is great! However it is currently working using x position only and if a paragraph line extends over two lines and a click is made in the second line, the insertion of the span tag will happen in the first line rather than the second. – prince Aug 30 '11 at 13:50
  • I am aware of the flaws, but the solution was adapted for your current html context. – gion_13 Aug 30 '11 at 14:49
1

This can be done with somewhat complex scripting.

i can state an algorithm that you can try.

1.JQuery have an API offset() http://api.jquery.com/offset/ using that you can get the offset and element.

2.Now you need to take the innerHTML of the element, take it as string, from the offset Y val, split at position Y in the string. make the element as two elements.

3.Now you can directly create an Element in script using creteElement(tagname) and set the innerHTML and then insert it in between the two elements

Kris
  • 8,680
  • 4
  • 39
  • 67