Контентный текстовый редактор и позиция курсора

Как я могу (используя jquery или другой) вставить html в позицию курсора / каретки моего contenteditable div:

<div contenteditable="true">Hello world</div>

Например, если курсор / каретка находился между «привет» и «мир», а затем пользователь щелкнул кнопку, например «вставить изображение», а затем с помощью javascript, что-то вроде <img src=etc etc> будет вставлено между «привет» и «мир». Надеюсь, я прояснил это = S

Будем признательны за пример кода, большое спасибо!


javascript html jquery contenteditable
person N S    schedule 30.05.2010    source источник

Ответы (4)


arrow_upward
10
arrow_downward

Следующая функция вставит узел DOM (элемент или текстовый узел) в позицию курсора во всех основных настольных браузерах:

function insertNodeAtCursor(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            sel.getRangeAt(0).insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

Если вы предпочитаете вставить строку HTML:

function insertHtmlAtCursor(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

Я адаптировал это из своего ответа на аналогичный вопрос: Как найти позицию курсора в содержательном DIV?

person Tim Down    schedule 30.05.2010

arrow_upward
2
arrow_downward

С contenteditable следует использовать execCommand.

Попробуйте document.execCommand('insertImage', false, 'image.jpg') или document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />'). Второй не работает в старом IE.

person Znarkus    schedule 05.03.2012
comment
Спасибо, это отлично работает в Chrome. Мне пришлось использовать insertHTML для добавления тегов alt к изображению; insertImage не удалось. - person Mike Wolfe; 24.04.2013
comment
@Znarkus, в сафари для iOS-приложения это не работает. Он не вставляет html-строки, содержащие тег изображения или вложение, в позицию курсора. Можете ли вы предложить какое-то решение. - person Mahi; 12.11.2018

arrow_upward
0
arrow_downward

в этом коде я просто заменил html-код с (") на (')

используйте этот синтаксис:

$("div.second").html("your html code and replace with (")to(')  ");
person yash patel    schedule 04.08.2018

arrow_upward
-1
arrow_downward

Я бы рекомендовал использовать плагин jquery a-tools

Этот плагин имеет семь функций:

* getSelection – return start, end position, length of the selected text and the selected text. return start=end=caret position if text is not selected;
* replaceSelection – replace selected text with a given string;
* setSelection – select text in a given range (startPosition and endPosition);
* countCharacters – count amount of all characters;
* insertAtCaretPos – insert text at current caret position;
* setCaretPos – set cursor at caret position (1 = beginning, -1 = end);
* setMaxLength – set maximum length of input field. Also provides callback function if limit is reached. Note: The function has to have a number as input. Positive value for setting of limit and negative number for removing of limit.

Вам понадобится insertAtCaretPos:

$("#textarea").insertAtCaretPos("<img src=etc etc>");

Может быть недостаток: эти плагины работают только с элементами textarea en input: text, поэтому могут возникать конфликты с contenteditable.

person Zilverdistel    schedule 30.05.2010
comment
Может быть недостаток: эти плагины работают только с элементами textarea en input: text, поэтому могут возникнуть конфликты с contenteditable. Вы правы. Это вообще не сработает. - person Tim Down; 31.05.2010