Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2014, 20:22
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

Обернуть тегами выделенный фрагмент текста
Есть такой блок:
<div class="editor-content" id="editor-content" contenteditable="true">
    as dd sad as
</div>

кусок плагина в котором проверяю выделение:
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(), все правильно работает...

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

и желательно пример где подобная задача решается, именно такая... много перегуглил уже
зараннее спасибо)
p.s. просьба не троллить по поводу BB, т.к. [b] - здесь исключительно для примера
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2014, 20:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sanu0074,
потому что
Цитата:
var sub = string.substr(start[, length])
Аргументы
start
начальная позиция, начиная от 0

length
сколько символов брать с позиции start

http://javascript.ru/String/substr

var text = val.substr(0,sel.start) + "[abcd]" + val.substr(sel.start,sel.end-sel.start) + "[/abcd]" + val.substr(sel.end);
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2014, 22:46
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

рони, спасибо)
тупанул жестко с синтаксисом(

я вот сделал щас так, работает, выделяет как надо:
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"
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2014, 23:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sanu0074,
так выделяется и считается видимый текст а вы редактируите строка 37 весь текст с тегами - стирайте теги сразу
val = editor.html();
val = stripTags(val);
fragment = val.substr(sel.start, (sel.end-sel.start));

Последний раз редактировалось рони, 09.04.2014 в 23:11.
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2014, 10:15
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

рони,
Да, так работает, но всё что заранее было выделено теряется и обарачивается только текущий фрагмент. это не хорошо, как правильно обернуть фрагммент тегами сохранив существующие?
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2014, 11:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Sanu0074
как правильно обернуть фрагммент тегами сохранив существующие?
искать текстовые ноды сравнивать их значения со
sel.start и sel.end- -- нод может быть несколько оборачивать каждую
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2014, 16:33
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

рони,
подкиньте примерчик как это делать)
Хорошо былобы как-то знать с какого участка текста было выделении или др вариант - цикл и регулярки которые будут удалять самые крайние соседние теги... перед этим сравнив их на сходство...
пока непойму как все же правильно подойти к решению задачи
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2014, 17:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Sanu0074
удалять самые крайние соседние теги
а как вы их вычислите ?
Ответить с цитированием
  #9 (permalink)  
Старый 10.04.2014, 17:53
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

рони,
я еще не пробовал, но думаю регулярками попробовать, при этом циклом искать теги в строке.... звучит это жестко, но пока еще не пробовал
Ответить с цитированием
  #10 (permalink)  
Старый 10.04.2014, 18:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sanu0074,
а вложенные теги?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить отмену выделения текста от клика мышью? Маэстро Internet Explorer 0 03.04.2012 21:21
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02