Обернуть тегами выделенный фрагмент текста

@Sanu0074 · Регистрация: 14.06.2010

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

Есть такой блок:

HTML5
1
2
3
  <div class="editor-content" id="editor-content" contenteditable="true">
    as dd sad as
  </div>

кусок плагина в котором проверяю выделение:

JavaScript
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
            getSel = function(element) {
                var start = 0, end = 0;
                var sel, range, priorRange;
                if (typeof window.getSelection != "undefined") {
                    range = window.getSelection().getRangeAt(0);
                    priorRange = range.cloneRange();
                    priorRange.selectNodeContents(element);
                    priorRange.setEnd(range.startContainer, range.startOffset);
                    start = priorRange.toString().length;
                    end = start + range.toString().length;
                } else if (typeof document.selection != "undefined" &&
                        (sel = document.selection).type != "Control") {
                    range = sel.createRange();
                    priorRange = document.body.createTextRange();
                    priorRange.moveToElementText(element);
                    priorRange.setEndPoint("EndToStart", range);
                    start = priorRange.text.length;
                    end = start + range.text.length;
                }
                return {
                    start: start,
                    end: end
                };
            },
        
            alertSelection = function() {
                var mainDiv = document.getElementById(sett.id);
                var sel = getSel(mainDiv);
                var val = editor.html();
                var text = val.substr(0,sel.start) + "[abcd]" + val.substr(sel.start,sel.end) + "[/abcd]" + val.substr(sel.end,val.length);
                
                alert(text);
            }

при выделении символов "dd", alert выводит следующее: "as [abcd]dd sad as[/abcd] sad as"
хотя по логике должно вывести это: "as [abcd]dd[/abcd] sad as"

проверял что возвращает функция getSel(), все правильно работает...

непойму почему так...
помогите разобраться.

и желательно пример где подобная задача решается, именно такая... много перегуглил уже
зараннее спасибо)

@kalabuni · 09.04.2014, 18:23

Сообщение от Sanu0074

желательно пример где подобная задача решается

таких задач никто не решает
вы, похоже, единственный на всём белом свете

contenteditable="true" прописывается для того, чтобы оперировать реальными тегами (т.е. начинающимися с < и заканчивающимися >)
вы же зачем-то установили contenteditable="true", но работаете с BB-кодами

таковым маразмом, уверен, никто в мире не занимался, не занимается, и не будет заниматься

@Sanu0074 · 09.04.2014, 22:45 **[ТС]**

Сообщение от kalabuni

таковым маразмом, уверен, никто в мире не занимался, не занимается, и не будет заниматься

это для примера я показываю, то что BB ненужен всем ясно. важен сам принцип работы. Есть решения?
если нет, то нечего срачи свои лепить в тему господин тролль)

Добавлено через 3 часа 16 минут
тупанул жестко с синтаксисом(

я вот сделал щас так, работает, выделят как надо:

JavaScript
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
        var editor = this,
        
            getSel = function(element) {
                var start = 0, end = 0;
                var sel, range, priorRange;
                if (typeof window.getSelection != "undefined") {
                    range = window.getSelection().getRangeAt(0);
                    priorRange = range.cloneRange();
                    priorRange.selectNodeContents(element);
                    priorRange.setEnd(range.startContainer, range.startOffset);
                    start = priorRange.toString().length;
                    end = start + range.toString().length;
                } else if (typeof document.selection != "undefined" &&
                        (sel = document.selection).type != "Control") {
                    range = sel.createRange();
                    priorRange = document.body.createTextRange();
                    priorRange.moveToElementText(element);
                    priorRange.setEndPoint("EndToStart", range);
                    start = priorRange.text.length;
                    end = start + range.text.length;
                }
                return {
                    start: start,
                    end: end
                };
            },
            
            stripTags = function(text){
                if(text.length<3){return;}
                var regex = /(<([^>]+)>)/ig;
                return text.replace(regex, "");
            },
        
            setTag = function(tag) {
                var mainDiv = document.getElementById(sett.id),
                    sel = getSel(mainDiv),
                    val = editor.html(),
                    fragment = stripTags(val.substr(sel.start, (sel.end-sel.start)));
                    
                    text = val.substr(0, sel.start) + "<"+tag+">" + fragment + "</"+tag+">" + val.substr(sel.end);
                
                editor.html(text);
            }
 
 
 
        editor.bind('keydown','ctrl+b',function(){
           setTag("strong");
           return false;
        });

Теперь как правильно сделать, чтоб когда уже обрамленный текст (в данном случае жирный) выделяеш, нажимаеш ctrl+b, и он теряет выделение (в данном случае теги strong по краям должны пропасть)....
Как правильно сделать?
В этом примере при обратном выделении вставляется такое: "as dd g>sad as"

@kalabuni · 09.04.2014, 22:57

вам знакомы execCommand () или вы всё же предпочитаете изобрести свой собственный велосипед?

порекомендую посмотреть

@Sanu0074 · 09.04.2014, 22:59 **[ТС]**

kalabuni, да знакомы)
хочется вилик сделать, поэтому интерисуюсь)

@vinternete · 25.11.2014, 15:28

Подскажите, как привязать срабатывание кода приведенного в 3 сообщении к щелчку по кнопке или div, т.е. при ctrl+b -> работает отлично, пытался повесить по аналогии

HTML5
1
<div onclick="setTag('strong');">Try</div>

Обвел текст, проверил комбинацией клавиш - есть результат, нажал на "Try" - не срабатывает. В чем может быть причина?

@Sanu0074 · 25.11.2014, 15:52 **[ТС]**

vinternete, юзайте jquery.hotkeys

@vinternete · 25.11.2014, 17:32

Я не правильно выразился, мне нужно, чтобы пользователь мог выделить код и нажав на кнопку <button id="id"> или <div id="id"> добавить теги, то есть отслеживание нажатий клавиш и комбинаций ненужно. Проблема в том, что опыта у меня с js 2 дня, а сделать это "надо было еще вчера", поэтому я не понимаю причины, почему при

JavaScript
1
2
3
4
editor.bind('keydown','ctrl+b',function(){
           setTag("strong");
           return false;
        });

срабатывает, а при:

JavaScript
1
<div onclick="setTag('strong');">Try</div>

не срабатывает, именно в данном коде (3 сообщение).

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	09.04.2014, 22:57
	вам знакомы execCommand () или вы всё же предпочитаете изобрести свой собственный велосипед? порекомендую посмотреть 1

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	09.04.2014, 22:59 [ТС]
	kalabuni, да знакомы) хочется вилик сделать, поэтому интерисуюсь) 0

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	25.11.2014, 15:52 [ТС]
	vinternete, юзайте jquery.hotkeys 0