Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   document.execCommand и выделение (https://javascript.ru/forum/misc/39676-document-execcommand-i-vydelenie.html)

sexyQuery 08.07.2013 06:07

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


как предотвратить?

sexyQuery 08.07.2013 06:13

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

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);
        }
    }


Часовой пояс GMT +3, время: 09:51.