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

Как изменить размер шрифта до 30px (например) с помощью document.execCommand?

Это:

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 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');

Ответ 3

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

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

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

Ответ 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>

Ответ 5

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

Ответ 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 и выше.

Ответ 7

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

Как следствие, он не должен просматривать 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, последняя используется просто как удобный способ для обертывания выбранного содержимого даже между различными элементами.

Вот живая ДЕМО

Ответ 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);
}

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