execCommand без выбора?(установить шрифт, размер и т. д.) - PullRequest
Новая
       88

execCommand без выбора?(установить шрифт, размер и т. д.)

2 голосов
/ 07 июля 2011

Я могу заставить свой собственный редактор WYSIWYG применять стили к выделенному тексту без проблем: 

pnlDocumentEditor_IFrame.document.execCommand(cmd, ui, opt)

... но мне нужно разрешить пользователю устанавливать шрифт, или размер шрифта, или жирный шрифт и т. Д., Чтобы для текста, набранного ПОСЛЕ этой команды, применялся этот стиль.

Возможно ли это? Кажется, что все execCommands, которые я пробовал, работают только с выделенным текстом.

1 Ответ

0 голосов
/ 12 ноября 2011

Применение execCommand к определенному элементу, БЕЗ выбора его мышью, можно выполнить с помощью этой функции:

Пример jsFiddle 

function execCommandOnElement(el, commandName, value) {
    if (typeof value == "undefined") {
        value = null;
    }

    if (typeof window.getSelection != "undefined") {
        // Non-IE case
        var sel = window.getSelection();

        // Save the current selection
        var savedRanges = [];
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            savedRanges[i] = sel.getRangeAt(i).cloneRange();
        }

        // Temporarily enable designMode so that
        // document.execCommand() will work
        document.designMode = "on";

        // Select the element's content
        sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);

        // Execute the command
        document.execCommand(commandName, false, value);

        // Disable designMode
        document.designMode = "off";

        // Restore the previous selection
        sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedRanges.length; i < len; ++i) {
            sel.addRange(savedRanges[i]);
        }
    } else if (typeof document.body.createTextRange != "undefined") {
        // IE case
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.execCommand(commandName, false, value);
    }
}

И пример использования: 

var testDiv = document.getElementById("test");
execCommandOnElement(testDiv, "Bold");
execCommandOnElement(testDiv, "ForeColor", "red");

Источник: установить execcommand только для div

...