Balises minimalistes pour les articles

AlbaAlba Member
juin 2006 modifié dans Archives
Il semble qu'il y ait un problème de mise en page, désolé pour la gène occasionné, mais je ne vois pas comment garder du code intact autrement !
Afin d'éviter la redondance de certaines manipulation comme la laborieux travail de mise en forme du texte, voici un peu de javascript pour faciliter la sémantique (?). Donc au programme des balises simples comme EM ou P, mais qui font gagner au final un temps fou sur les longs textes plein de titres.
Note : Le javascript viens d'éditeurjavascript, celà fait des années que je n'ai pas jeter un oeil sur un code javascript, donc je ne sais pas si il peut être qualifié de propre, en tous cas, il est succinct (!) et facile à mettre en oeuvre.

Démarche

- Ouvrir le fichier "top.php" du répertoire "admin".
- Chercher la balise <script>
- Ajouter après (retour chariot possible évidemment) 
<script type="text/javascript">
			var isMozilla = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1) ? true : false;
			var regexp = new RegExp("[\r]","gi");
			function storeCaret(selec)
			{
			if (isMozilla)
			{
			// Si on est sur Mozilla
			oField = document.forms['news'].elements['contenu'];
			objectValue = oField.value;
			deb = oField.selectionStart;
			fin = oField.selectionEnd;
			objectValueDeb = objectValue.substring( 0 , oField.selectionStart );
			objectValueFin = objectValue.substring( oField.selectionEnd , oField.textLength );
			objectSelected = objectValue.substring( oField.selectionStart ,oField.selectionEnd );
			//	alert("Debut:'"+objectValueDeb+"' ("+deb+")\nFin:'"+objectValueFin+"' ("+fin+")\n\nSelectionné:'"+objectSelected+"'("+(fin-deb)+")");
			oField.value = objectValueDeb + "<" + selec + ">" + objectSelected + "</" + selec + ">" + objectValueFin;
			oField.selectionStart = strlen(objectValueDeb);
			oField.selectionEnd = strlen(objectValueDeb + "<" + selec + ">" + objectSelected + "</" + selec + ">");
			oField.focus();
			oField.setSelectionRange(
			objectValueDeb.length + selec.length + 2,
			objectValueDeb.length + selec.length + 2);
			}
			else
			{
			// Si on est sur IE
			oField = document.forms['news'].elements['contenu'];
			var str = document.selection.createRange().text;
			if (str.length>0)
			{
			// Si on a selectionné du texte
			var sel = document.selection.createRange();
			sel.text = "<" + selec + ">" + str + "</" + selec + ">";
			sel.collapse();
			sel.select();
			}
			else
			{
			oField.focus(oField.caretPos);
			//	alert(oField.caretPos+"\n"+oField.value.length+"\n")
			oField.focus(oField.value.length);
			oField.caretPos = document.selection.createRange().duplicate();
			var bidon = "%~%";
			var orig = oField.value;
			oField.caretPos.text = bidon;
			var i = oField.value.search(bidon);
			oField.value = orig.substr(0,i) + "<" + selec + "></" + selec + ">" + orig.substr(i, oField.value.length);
			var r = 0;
			for(n = 0; n < i; n++)
			{if(regexp.test(oField.value.substr(n,2)) == true){r++;}};
			pos = i + 2 + selec.length - r;
			//placer(document.forms['news'].elements['contenu'], pos);
			var r = oField.createTextRange();
			r.moveStart('character', pos);
			r.collapse();
			r.select();

		}
	}
}
		</script>
- Sauver et fermer.
- Ouvrir le fichier "article.php" du même répertoire.
- Chercher "<p class="field"><label>Contenu :</label></p>"
- Ajouter après 
<p><input type="button" value="p" style="width:50px;font-weight:bold" onclick="storeCaret('p')">
<input type="button" value="em" style="width:50px;font-style:italic" onclick="storeCaret('em')">
<input type="button" value="strong" style="width:50px;text-decoration:underline" onclick="storeCaret('strong')">
<input type="button" value="cite"style="width:50px" onclick="storeCaret('cite')">
<input type="button" value="ins"style="width:50px" onclick="storeCaret('ins')">
<input type="button" value="pre"style="width:50px" onclick="storeCaret('pre')">
</p>
Comme vous pouvez le voir, il est très simple d'ajouter ou de retrancher des balises, voilà d'ailleurs une liste des balises autorisées : http://www.siteduzero.com/tuto-3-4874-1-liste-des-balises-xhtml.html

Et pour finir, un petit exemple illustré.
http://img46.imageshack.us/img46/8476/image13ye.th.png

Réponses

Connectez-vous ou Inscrivez-vous pour répondre.