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

На 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 />

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

7 голосов | спросил prince 30 PM00000040000004831 2011, 16:28:48

3 ответа


0

Это грязно, но использует 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 30 PM00000050000003431 2011, 17:19:34
0

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

ответил gion_13 30 PM00000050000004831 2011, 17:29:48
0

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

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

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

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

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

ответил Kris 30 PM00000040000004731 2011, 16:40:47

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132