document.execCommand () FontSize en pixels?

https://stackoverflow.com/questions/5868295

28-10-2019
|

Question

Comment puis-je changer la taille de police à 30px (par exemple) en utilisant document.execCommand?

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

ne fonctionne pas, parce que dans 3 argument de la fonction execCommand, il ne me permet d'entrer une valeur entre et y compris 1 à 7.

La solution

Il est une limitation de la commande FontSize. Il y a différentes options que je peux penser:

Vous pouvez utiliser une classe CSS à la place et utiliser le Module Applicateur de ma bibliothèque Rangy;

Vous pouvez utiliser une méthode aki, comme appeler document.execCommand("fontSize", false, "7");, puis de trouver les éléments de la commande a créés et de les modifier au besoin. Voir par exemple: http://jsfiddle.net/S3ctN/ . Cela dépend évidemment l'absence d'autres éléments de <font> avec la taille 7 dans le document et il repose également sur le navigateur en utilisant des éléments de <font> pour la taille de police, qu'il semble qu'ils font tous.

Autres conseils

Fonction

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

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

Exécuter

execFontSize(30, 'px');

Comme deuxième réponse suggèrent exécuter quelques-uns jquery après ExecCommand et remplacer le balisage avec votre propre.

Il suffit de remplacer élém avec votre élément et modifier la taille de la police avec la valeur désirée.

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

Il suffit de la remplacer par css:

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

Ou si vous utilisez SCSS vous pouvez utiliser une boucle pour générer tous les sélecteurs de 1 à 7:

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

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

juste mes œuvres Solutions.IT avec chrome. le code a été trouvé dans un site de porcelaine (de eqxiu).

first

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

puis

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

Note: le passage de la taille des caractères à execCommand doit être au moins « 12px » et au-dessus.

Voici une meilleure solution que beaucoup proposée ici, car il obtient directement l'élément sur lequel pour changer la taille de la police du texte sélectionné.

Par conséquent, il ne doit pas parcourir les DOM pour obtenir l'élément droit, et ne nécessite pas d'interdire l'utilisation d'un fontSize spécifique (7, comme le suggère la première option de la réponse acceptée, et dans d'autres réponses).

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

En résumé nous utilisons simplement execCommand pour envelopper la sélection avec une portée, de sorte que l'appel après getSelection () whill ont la durée mis en évidence en tant que parent. Ensuite, nous ajoutons simplement le style fontSize à cette période identifiée.

Ici, nous utilisons la commande fontSize, il ne sera pas enveloppé dans un <span>, mais à l'intérieur d'un <font>.

Mais ceci est une méthode générique qui peut fonctionner avec une commande de execCommand, ce dernier étant utilisé comme une manière commode pour envelopper le contenu sélectionné, même entre les différents éléments.

Voici un live DEMO

Trouver une solution en JavaScript pur qui fonctionne pour plusieurs lignes avec HTML personnalisé (couleurs, familles de polices).

Obtenir la sélection du document. Parse la sélection et enregistrer les balises HTML de celui-ci. Puis, avec document.execCommand insérer le code html sélectionné dans un div qui a du style en ligne. En outre un avantage lors de l'utilisation document.execCommand ( 'insertHTML', false, html) est que vous obtenez dans undo éditeur WYSIWYG.

Ceci est la fonction:

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

it helps.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow