Блог

Как я могу изменить размер шрифта на 30 пикселей (например) с помощью document.execCommand ?

Это:

 document.execCommand("fontSize", false, "30px");
  

не работает, потому что в 3-м аргументе функции execCommand она позволяет мне вводить значение только от 1 до 7 включительно.

Это ограничение FontSize команды. Есть различные варианты, о которых я могу подумать:

• Вместо этого вы могли бы использовать класс CSS и использовать модуль CSS class applier из моей библиотеки Rangy;
• Вы могли бы использовать хакерский метод, такой как вызов document.execCommand("fontSize", false, "7"); , а затем найти элементы, созданные командой, и изменить их по мере необходимости. Смотрите пример: http://jsfiddle.net/S3ctN /. Это, очевидно, зависит от того, что в документе нет других <font> элементов размером 7, и это также зависит от браузера, использующего <font> элементы для определения размера шрифта, что, похоже, они все делают.

Функция

 var execFontSize = function (size, unit) {
    var spanString = $('<span/>', {
        'text': document.getSelection()
    }).css('font-size', size   unit).prop('outerHTML');

    document.execCommand('insertHTML', false, spanString);
};
  

Выполнить

 execFontSize(30, 'px');
  

Просто переопределите это с помощью css:

 font[size='7']{
    font-size: 20px; // or other length unit
}
  

Или, если вы используете scss, вы могли бы использовать цикл для генерации всех селекторов от 1 до 7:

 @for $i from 1 to 7 {
    font[size='#{$i}']{
        font-size: $i * 2vw
    }
}
  

В качестве второго ответа предлагаю просто запустить какой-нибудь jquery после execcommand и заменить разметку на свою собственную.

Просто замените элемент своим элементом и отредактируйте размер шрифта на желаемое значение.

 jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");
  

Вот лучшее решение, чем многие предложенные здесь, поскольку оно напрямую получает элемент, на котором можно изменить размер шрифта выделенного текста.

Как следствие, ему не нужно просматривать DOM, чтобы получить нужный элемент, и не требуется запрещать использование определенного размера шрифта (7, как предложено в первом варианте принятого ответа и в других ответах).

 function changeFont() {
    document.execCommand("fontSize", false, "7");
    var fontElements = window.getSelection().anchorNode.parentNode
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = "30px";
}
  

В итоге мы просто используем execCommand, чтобы обернуть выделение промежутком, так что последующий вызов getSelection() будет иметь выделенный промежуток в качестве родительского . Затем мы просто добавляем стиль размера шрифта к указанному диапазону.

Здесь, поскольку мы используем команду FontSize , она будет заключена не внутри a <span> , а внутри <font> .

Но это универсальный метод, который может работать с любой командой execCommand, последняя используется просто как удобный способ переноса выбранного содержимого даже между разными элементами.

Вот живая ДЕМОНСТРАЦИЯ

это просто мой solutions.it работает с chrome. код был найден на веб-сайте в Китае (eqxiu).

Первый

 document.execCommand("styleWithCSS", 0, true);
document.execCommand('fontSize', 0, '12px');
  

затем

 jQuery.find('[style*="font-size: -webkit-xxx-large"],font[size]').css("font-size", "12px")
  

примечание:
размер шрифта, передаваемый в execCommand, должен быть не менее ’12px’ и выше.

Найдено решение на чистом JavaScript, которое работает для нескольких строк с пользовательским HTML (цвета, семейства шрифтов).

Получаем выделение документа. Проанализируйте выделение и сохраните из него html-теги. Затем с помощью document.execCommand вставьте выбранный HTML-код внутри div, который имеет встроенный стиль. Также преимуществом при использовании document.execCommand(‘insertHtml’, false, html) является то, что вы получаете отмену в редакторе WYSIWYG.

Это функция:

 function fontSize(size) {

    var sel = document.getSelection(); // Gets selection

    var selectedHtml = "";
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len;   i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        const children = container.getElementsByTagName("*")
        for(let child of children) {
            if(child.style.fontSize) {
                child.style.fontSize = `${size}px`
            }
        }
        selectedHtml = container.innerHTML;
    }

    let html = `<div style="font-size: ${size}px;">${selectedHtml}</div>`
    document.execCommand('insertHTML', false, html);
}
  

Надеюсь, это поможет.

Если вы хотите установить размер шрифта по умолчанию для редактора, то это то, что вы можете сделать.

Вы должны настроить TinyMCE CSS, используя content_style параметры.

Например, следующая конфигурация установит размер шрифта по умолчанию равным 12pt.

 tinymce.init({
  /* ... */ content_style: "body {font-size: 12pt;}",
});
  

Просто помните, что эти стили специфичны для содержимого внутри редактора — если вы хотите, чтобы это был размер по умолчанию и для опубликованного содержимого, вам нужно убедиться, что тот же стиль применяется к этим опубликованным страницам.

Надеюсь, это поможет.