Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2013, 06:07
Аспирант
Отправить личное сообщение для sexyQuery Посмотреть профиль Найти все сообщения от sexyQuery
 
Регистрация: 23.06.2013
Сообщений: 54

document.execCommand и выделение
Общие функции

(function(){
    var cache = {};

    gid = function(id){
        return cache[id] ? cache[id] : cache[id] = document.getElementById(id);
    };
})();

function saveSelection() {
    var sel = window.getSelection();
    
    return sel.rangeCount ? sel.getRangeAt(0) : null;
}

function restoreSelection(range) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}


Сам редактор

addEventListener('load', function() {
    var html = gid('htmlContent'), range = null;
    
    html.addEventListener('mouseup', function() {
        range = saveSelection();
    });
    
    function applyFormat(format, value) {    
        if (range) {     
            console.log(range);
            restoreSelection(range);
            document.execCommand(format, false, value);
            console.log(range);
        }
    }
    
    gid('iconBold').addEventListener('click', function() {
        applyFormat('bold');
    });
    
    gid('iconItalic').addEventListener('click', function() {
        applyFormat('italic');
    });
    
    gid('iconUnderline').addEventListener('click', function() {
        applyFormat('underline');
    });
});


После выполнения document.execCommand изменяется Range
// до:
Range {commonAncestorContainer: text, collapsed: false, endOffset: 16, endContainer: text, startOffset: 13…}
collapsed: true
commonAncestorContainer: #text
endContainer: #text
endOffset: 0
startContainer: #text
startOffset: 0
__proto__: Range
// после:
Range {commonAncestorContainer: text, collapsed: true, endOffset: 0, endContainer: text, startOffset: 0…}
collapsed: true
commonAncestorContainer: #text
endContainer: #text
endOffset: 0
startContainer: #text
startOffset: 0
__proto__: Range


как предотвратить?
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2013, 06:13
Аспирант
Отправить личное сообщение для sexyQuery Посмотреть профиль Найти все сообщения от sexyQuery
 
Регистрация: 23.06.2013
Сообщений: 54

пробовал клонировать все равно сворачивается

function applyFormat(format, value) {    
        if (range) {     
            var copy = range.cloneRange();
            console.log(range);
            restoreSelection(range);
            document.execCommand(format, false, value);
            range = copy;
            console.log(range);
        }
    }
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оставить выделение при смене фокуса DZHETIGAPA Events/DOM/Window 5 01.02.2018 20:11
Выделение содержимого в input Marv Элементы интерфейса 8 20.07.2012 14:18
массове выделение:) розовый слоник Events/DOM/Window 7 02.02.2011 17:02
Выделение текста в текстовом поле. Как снять выделение с пробела вконце? Roman Koff Events/DOM/Window 10 01.07.2010 16:48
Выделение одиночных тэгов Pattern Events/DOM/Window 7 26.05.2009 23:29