Изменение HTML в зависимости от того, где я нажимаю с Javascript / JQuery - PullRequest
Новая
       26

Изменение HTML в зависимости от того, где я нажимаю с Javascript / JQuery

7 голосов
/ 30 августа 2011

На html-странице у вас может быть код с двумя абзацами, подобными этому: 

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

и очень просто, эти два тега будут выглядеть так:

<ч />

Первый абзац

Второй абзац

<ч />

Меня интересует то, чтобы пользователь мог щелкнуть где-нибудь в отрендеренном HTML-коде, чтобы вставить новый элемент с JQuery. Например, если я щелкну между буквой i и буквой r (просто щелчок, без выделения / выделения) в слове f * ir * st, найденном в первом абзаце, я смогу вставить пользовательский элемент span или что-то, что мне нравится, именно в этой позиции в HTML-коде, что приводит к примерно так: 

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

Есть идеи, которые могут мне помочь? Мой запрос исключает абсолютное позиционирование. Это не решило бы мои проблемы.

Ответы [ 3 ]

2 голосов
/ 30 августа 2011

Это грязно, но используется 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();
});
2 голосов
/ 30 августа 2011

Вот мое решение: http://jsfiddle.net/gion_13/L6aeT/
Он работает путем расчета фактического размера (в пикселях) строки.

1 голос
/ 30 августа 2011

Это можно сделать с помощью довольно сложных сценариев.

Я могу указать алгоритм, который вы можете попробовать.

1.JQuery имеет смещение API () http://api.jquery.com/offset/, используя который вы можете получить смещение и элемент.

2. Теперь вам нужно взять innerHTML элемента, взять его как строку, из смещения Y val, разделить в позиции Y в строке. сделать элемент как два элемента.

3. Теперь вы можете напрямую создать элемент в скрипте, используя creteElement (тэг) и установить innerHTML, а затем вставить его между двумя элементами

...