Вставка текста в конец div contenteditable="true"

@Wizlight · Регистрация: 31.05.2013

Студворк — интернет-сервис помощи студентам

http://jsfiddle.net/petroveg/Lnm256qc/1/

Помогите модифицировать код. При установке курсора в нужном месте текстового блока и при нажатии "Вставить" - текст с другого блока вставляется в нужном месте(там где был установлен курсор).
Но если курсор не устанавливать - текст вставляется в начало блока. Нужно чтобы по умолчанию(если курсор не установлен) текст вставлялся в конец текстового блока. А еще лучше, чтобы и курсор после вставки текста размещался не перед вставленным текстом а в конце него. Благодарю за внимание

@Vadim_Lasso · 09.10.2015, 16:02

Например так: http://jsfiddle.net/Lnm256qc/44/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>http://jsfiddle.net/Lnm256qc/44/</title>
        <style type="text/css">
            .content,.container{display:inline-block;vertical-align:top}
            .content,.source{border:4px solid #ccc;border-radius:6px}
            .content:focus,.source:focus{border-color:#69c}
            .content{overflow:auto;width:400px;height:300px}
            .source{width:200px;height:100px}
            .inner{margin:0 0 30px}
            .action{height:40px;line-height:40px;margin:0;padding:0 20px;border:0;line-height:40px;border-radius:5px;font:inherit;color:#fff;background:#777}
            .action:hover,.action:focus{background:#69c}
            .action:active{background:#c30}
        </style>
    </head>
    <body>
        <div class="content" data-target="insert" contenteditable="true">
            Здравствуйте! Обычно для ввода/изменения текста используются textarea и input.
            <p>В моём случае я использую див с contentEditable="true". Поэтому здесь не подходят функции для определения позиции курсора в textarea и input.</p>
            <p><b>Сама</b> задача: мне нужно узнать позицию курсора в этом диве, после чего получить эту позицию, и вставить туда кусок текста, который будет добавляться при клике на другой див.</p>
            Для начала хочу узнать, как определить и получить позицию курсора в div'e с contentEditable="true"?
        </div>
        <div class="container">
            <div class="inner">
                <textarea placeholder="Текст для вставки" class="source" data-source="insert"><strong>Просто</strong> <em>Текст</em></textarea>
            </div>
            <button type="button" class="action" data-action="insert">Вставить</button>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script language="javascript">
            $(function () {
                var content = document.querySelector('[data-target="insert"]'),
                    source = document.querySelector('[data-source="insert"]');
 
                $(document).on('click', '[data-action="insert"]', function() {
                    insertHTML(source.value, content);
                });
            });
 
            function insertHTML(html, el) {
                var sel, range;
                if (window.getSelection) {
                    sel = window.getSelection();
                    if (elementContainsSelection(el)) {
                        if (sel.getRangeAt && sel.rangeCount) {
                            range = sel.getRangeAt(0);
                            range.deleteContents();
                            var el = document.createElement("div");
                            el.innerHTML = html;
                            var frag = document.createDocumentFragment(),
                                node, lastNode;
                            while ((node = el.firstChild)) {
                                lastNode = frag.appendChild(node);
                            }
                            range.insertNode(frag);
 
                            if (lastNode) {
                                range = range.cloneRange();
                                range.setStartAfter(lastNode);
                                range.collapse(false);
                                sel.removeAllRanges();
                                sel.addRange(range);
                            }
                        } else if (document.selection && document.selection.type != "Control") {
                            document.selection.createRange().pasteHTML(html);
                        }
                    } else {
                        setEndOfContenteditable(el);
                        insertHTML(html, el);
                    }
                }
            }
 
            function setEndOfContenteditable(contentEditableElement) {
                var range, selection;
                if (document.createRange)
                {
                    range = document.createRange(); 
                    range.selectNodeContents(contentEditableElement);
                    range.collapse(false);
                    selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range);
                } else if (document.selection)
                {
                    range = document.body.createTextRange();
                    range.moveToElementText(contentEditableElement);
                    range.collapse(false);
                    range.select();
                }
            }
 
            function elementContainsSelection(el) {
                var sel;
                if (window.getSelection) {
                    sel = window.getSelection();
                    if (sel.rangeCount > 0) {
                        for (var i = 0; i < sel.rangeCount; ++i) {
                            if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
                                return false;
                            }
                        }
                        return true;
                    }
                } else if ((sel = document.selection) && sel.type != "Control") {
                    return isOrContains(sel.createRange().parentElement(), el);
                }
                return false;
            }
 
            function isOrContains(node, container) {
                while (node) {
                    if (node === container) {
                        return true;
                    }
                    node = node.parentNode;
                }
                return false;
            }
        </script>
    </body>
</html>

@Wizlight · 09.10.2015, 16:42 **[ТС]**

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Wizlight 0 / 0 / 7 Регистрация: 31.05.2013 Сообщений: 181

	Вставка текста в конец div contenteditable="true" 09.10.2015, 14:14. Показов 3152. Ответов 2 Метки нет (Все метки) http://jsfiddle.net/petroveg/Lnm256qc/1/ Помогите модифицировать код. При установке курсора в нужном месте текстового блока и при нажатии "Вставить" - текст с другого блока вставляется в нужном месте(там где был установлен курсор). Но если курсор не устанавливать - текст вставляется в начало блока. Нужно чтобы по умолчанию(если курсор не установлен) текст вставлялся в конец текстового блока. А еще лучше, чтобы и курсор после вставки текста размещался не перед вставленным текстом а в конце него. Благодарю за внимание 0

@Wizlight 0 / 0 / 7 Регистрация: 31.05.2013 Сообщений: 181
	09.10.2015, 16:42 [ТС]
	0

Вставка текста в конец div contenteditable="true"

Решение