document.execcommand () fontsize в пикселях?

Question

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

Этот:

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

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

Answer 1

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

• Вместо этого вы можете использовать класс CSS и использовать CSS Class Applier модуль моего Стройный библиотека;
• Вы можете использовать хакерский метод, такой как вызов 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

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

$(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 6

это только мои решения. Это работает с 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")

ПРИМЕЧАНИЕ. Пропуск fontsize to execcommand должен быть как минимум «12px» и выше.

Answer 7

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

Как следствие, ему не нужно просматривать 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 в этот идентифицированный SPAN.

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

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

Вот в прямом эфире Демо

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

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