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

Question

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

Как может, я (использование jQuery или другого) вставляю HTML в курсоре/позиции курсора моего contenteditable отделения:

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

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

Пример кода значительно ценился бы, большое спасибо!

6

javascript jquery html contenteditable

задан Cal S 30 May 2010 в 08:30

2 ответа

Другие вопросы по тегам:

javascript jquery html contenteditable

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

score 10 · Answer 1

Следующая функция вставит узел 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);
    }
}

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

score -1 · Answer 2

Я бы рекомендовал использовать плагин 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: текстовые элементы, поэтому могут быть конфликты с contenteditable.