document.execCommand () FontSize в пикселях?

Question

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

Это:

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

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

Answer 1

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

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

Answer 2

Функция

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

Answer 3

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

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

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

Answer 4

$(document).ready(()=>{
	var activeFontSize = 30;
	var oDoc = document.getElementById("editor");
	var style = document.createElement("style");
	document.body.appendChild(style);
	
	function setFontSize(value){
		$editor.focus();
		document.execCommand("fontsize", false, 20);
		activeFontSize = value;
		createStyle();
		updateTags();
	}

	function updateTags(){
		var fontElements = oDoc.getElementsByTagName("font");
		for (var i = 0, len = fontElements.length; i < len; ++i) {
			if (fontElements[i].size == "7") {
				fontElements[i].removeAttribute("size");
				fontElements[i].style.fontSize = activeFontSize+"px";
			}
		}
	}

	function createStyle(){
		style.innerHTML = '#editor font[size="7"]{font-size: '+activeFontSize+'px}';
	}

	function updateToolBar(args){
		$fontSize.val(args.fontsize);
	}

	var $fontSize = $("#fontSize");
	var $editor = $("#editor");

	$fontSize.on("change", ()=>{
		setFontSize($fontSize.val())
	})

	$editor.on("keyup", ()=>{
		updateTags();
	})

	//var i = 0;
	$editor.on("keyup mousedown", (e)=>{
		//i++;
		//console.log("e.target", e.target)
		try{
			var fontsize = $(window.getSelection().getRangeAt(0).startContainer.parentNode).css("font-size")
			fontsize = fontsize.replace("px", "");
			//document.execCommand("insertHTML", false, '<span class="font-size-detector'+i+'">X</span>');
			//var fontsize = $(e.target).css("font-size")//$editor.find(".font-size-detector"+i).css("font-size");
			//document.execCommand("undo", false, false);
			//$editor.focus();
			//console.log("fontsize", fontsize)
			updateToolBar({fontsize})
		}catch(e){
			console.log("exception", e)
		}
	})

	oDoc.focus();
	setFontSize(30);
})

.editor-box{box-shadow:0px 0px 1px 2px #DDD;max-width:500px;margin:0px auto;}
		.editor-tools{padding:20px;box-shadow:0px 2px 1px 0px #DDD}
		.editor-tools button{user-select:none;}
		#editor{height:200px;margin:10px 0px;padding:10px;font-size:14px;}
		#editor:focus{outline:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-box">
	<div class="editor-tools">
		<label>Font Size: </label>
		<select id="fontSize" >
			<option value="10">10px</option>
			<option value="12">12px</option>
			<option value="14">14px</option>
			<option value="20">20px</option>
			<option value="22">22px</option>
			<option value="30" selected="true">30px</option>
			<option value="35">35px</option>
			<option value="40">40px</option>
			<option value="45">45px</option>
			<option value="50">50px</option>
		</select>
	</div>
	<div id="editor" contenteditable="true">Hello, this is some editable text</div>
</div>

Answer 5

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

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

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

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

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

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

Вот живой DEMO

Answer 6

это только мои решения. Работает с хромом. код был найден на китайском веб-сайте (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 и выше.

Answer 7

Просто переопределите его с помощью 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
    }
}

Answer 8

Нашел решение в чистом 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());
        }
        selectedHtml = container.innerHTML;
    }

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

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