Document.execmand () Fontsize in pixel?

Question

Come posso cambiare la dimensione del carattere in 30px (ad esempio) usando document.execCommand?

Questo:

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

Non funziona, perché nel terzo argomento della funzione Execmand, mi consente solo di inserire un valore tra e compreso da 1 a 7.

Answer 1

È una limitazione del FontSize comando. Ci sono varie opzioni a cui riesco a pensare:

• È possibile utilizzare invece una classe CSS e utilizzare il CSS Class Applier modulo mio Rangy biblioteca;
• Potresti usare un metodo hacky, come la chiamata document.execCommand("fontSize", false, "7"); e quindi trovare gli elementi che il comando ha creato e modificandoli come richiesto. Vedi esempio: http://jsfiddle.net/s3ctn/. Questo ovviamente dipende da non esserci altro <font> Elementi con dimensione 7 nel documento e si basa anche sul browser utilizzando <font> Elementi per le dimensioni del carattere, che sembrano tutti.

Answer 2

Funzione

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

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

Eseguire

execFontSize(30, 'px');

Answer 3

Come suggerisce la seconda risposta, esegui solo un po 'di jQuery dopo ExecMand e sostituisci il markup con il tuo.

Basta sostituire Elem con il tuo elemento e modificare la dimensione del carattere con il valore desiderato.

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

Answer 4

Sovravarlo con CSS:

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

O se si utilizza SCSS è possibile utilizzare un ciclo per generare tutti i selettori da 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 le mie soluzioni. Funziona con Chrome. Il codice è stato trovato in un sito Web China (EQXIU).

primo

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

poi

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

Nota: il passaggio Fontsize a ExecMmand deve essere almeno "12px" e superiore.

Answer 7

Ecco una soluzione migliore di molti proposti qui, in quanto ottiene direttamente l'elemento su cui modificare la dimensione del carattere dal testo selezionato.

Di conseguenza, non deve sfogliare il DOM per ottenere l'elemento giusto e non richiede di vietare l'uso di una fonttsize specifica (7, come suggerito nella prima opzione della risposta accettata e in altre risposte ).

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

In sintesi utilizziamo solo ExecMummand per avvolgere la selezione con un intervallo, in modo che la successiva chiamata a getSelection () mentre abbia la campata evidenziata come genitore. Quindi aggiungiamo solo lo stile Fontsize a quella durata identificata.

Qui, poiché stiamo usando il comando Fontsize, non verrà avvolto all'interno di a <span>, ma all'interno di a <font>.

Ma questo è un metodo generico che può funzionare con qualsiasi comando di ExecMand, quest'ultimo viene utilizzato proprio come un modo conveniente per avvolgere il contenuto selezionato anche tra diversi elementi.

Ecco un vivo Demo

Answer 8

Ho trovato una soluzione in puro JavaScript che funziona per più linee con HTML personalizzato (colori, famiglie di caratteri).

Ottieni la selezione del documento. Analizza la selezione e salva i tag HTML da essa. Quindi con document.execmand inserisci l'HTML selezionato all'interno di un div che ha uno stile in linea. Anche un vantaggio quando si utilizzano document.execmand ('inserthtml', false, html) è che si ottiene annullamento nell'editor Wysiwyg.

Questa è la funzione:

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

Spero che sia d'aiuto.