document.execCommand() FontSize in pixels?

Question

How can I change font size to 30px (for example) using document.execCommand?

This:

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


        

Answer 1

Here is a better solution than many proposed here, as it directly gets the element on which to change the font size from the selected text.

As a consequence, it doesn't have to browse the DOM to get the right element, and doesn't require to ban the use of a specific fontSize (7, as suggested in the first option of the accepted answer, and in other answers).

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

In summary we just use execCommand to wrap the selection with a span, so that the subsequent call to getSelection() whill have the highlighted span as parent . Then we just add the fontSize style to that identified span.

Here, as we are using the fontSize command, it won't be wrapped inside a <span>, but inside a <font>.

But this is a generic method which can work with any command of execCommand, the latter being used just as a convenient manner to wrap the selected contents even among different elements.

Here is a live DEMO

Answer 2

As second answer suggest just run some jquery after execcommand and replace the markup with your own.

Just replace elem with your element and edit the font-size with the desired value.

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

Answer 3

Just override it with css:

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

Or if you use scss you could use a loop to generate all selectors from 1 to 7:

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

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

It's a limitation of the FontSize command. There are various options I can think of:

• You could use a CSS class instead and use the CSS class applier module of my Rangy library;
• You could use a hacky method, such as calling document.execCommand("fontSize", false, "7"); and then finding the elements the command has created and changing them as required. See example: http://jsfiddle.net/S3ctN/. This obviously depends on there being no other <font> elements with size 7 in the document and it also relies on the browser using <font> elements for font size, which it seems they all do.

Answer 6

it just my solutions.it works with chrome. the code was find in a china website(eqxiu).

first

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

then

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

note: the fontsize pass to execCommand must be at least '12px' and above.