document.execCommand () fontSize en píxeles?

Question

¿Cómo puedo cambiar el tamaño de la fuente a 30px (por ejemplo) usando document.execCommand?

Este:

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

No funciona, porque en el tercer argumento de la función execCommand, solo me permite ingresar un valor entre e incluido 1 a 7.

Answer 1

Es una limitación del FontSize dominio. Hay varias opciones en las que puedo pensar:

• Puede usar una clase CSS en su lugar y usar el Aplicador de clase CSS módulo de mi Alto y delgado biblioteca;
• Podrías usar un método hacky, como llamar document.execCommand("fontSize", false, "7"); y luego encontrar los elementos que el comando ha creado y cambiándolos según sea necesario. Ver ejemplo: http://jsfiddle.net/s3ctn/. Esto obviamente depende de que no haya otro <font> elementos con talla 7 en el documento y también se basa en el navegador usando <font> Elementos para el tamaño de la fuente, que parece que todos lo hacen.

Answer 2

Función

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

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

Ejecutar

execFontSize(30, 'px');

Answer 3

Como segunda respuesta, sugiere simplemente ejecutar un jQuery después de ExecCommand y reemplace el marcado con el suyo.

Simplemente reemplace elem con su elemento y edite el tamaño de la fuente con el valor deseado.

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

Answer 4

Solo anularlo con CSS:

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

O si usa SCSS, puede usar un bucle para generar todos los selectores de 1 a 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

Solo mis soluciones funciona con Chrome. El código se encuentra en un sitio web de China (EQXIU).

primero

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

después

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

Nota: El pase de FontSize a ExecCommand debe ser al menos '12px' y superior.

Answer 7

Aquí hay una mejor solución que muchos propuestos aquí, ya que obtiene directamente el elemento en el que cambiar el tamaño de fuente del texto seleccionado.

Como consecuencia, no tiene que navegar por el DOM para obtener el elemento correcto, y no requiere prohibir el uso de una fuente específica (7, como se sugiere en la primera opción de la respuesta aceptada, y en otras respuestas ).

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

En resumen, solo usamos ExecCommand para envolver la selección con un tramo, de modo que la llamada posterior a getSelection () tenga el tramo resaltado como padre. Luego, solo agregamos el estilo de font -tamaño a ese tramo identificado.

Aquí, como estamos usando el comando FontSize, no se envolverá dentro de un <span>, pero dentro de un <font>.

Pero este es un método genérico que puede funcionar con cualquier comando de ExecCommand, este último se usa de manera conveniente para envolver los contenidos seleccionados incluso entre diferentes elementos.

Aquí hay un en vivo MANIFESTACIÓN

Answer 8

Encontró una solución en JavaScript puro que funciona para múltiples líneas con HTML personalizado (colores, familias de fuentes).

Obtenga la selección del documento. Analice la selección y guarde las etiquetas HTML de ella. Luego con document.execcommand Inserte el HTML seleccionado dentro de un DIV que tiene un estilo en línea. También un beneficio cuando se usa document.execCommand ('inserthtml', falso, html) es que se deshace en el editor Wysiwyg.

Esta es la función:

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

Espero eso ayude.