Balises minimalistes pour les articles
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)
- Ouvrir le fichier "article.php" du même répertoire.
- Chercher "<p class="field"><label>Contenu :</label></p>"
- Ajouter après
Et pour finir, un petit exemple illustré.
http://img46.imageshack.us/img46/8476/image13ye.th.png
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.htmlEt pour finir, un petit exemple illustré.
http://img46.imageshack.us/img46/8476/image13ye.th.png
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Bon et bien après test sous IE, ton code ne fonctionne pas.
http://www.editeurjavascript.com/scripts/scripts_formulaires_3_318.php
Quand je ne vois pas d'URL, mais un gros bloc de texte, je passe dessus sans le voir...
Toutes mes excuses
En passant, voici l'image :
Le genre qui affiche le code HTML correspondant dès que tu clique dessus, ou le genre tu tapes et il se transforme en smiley ?
Peu importe la réponse, je ne peux pas travailler sur ça tant que je n'arrive pas à installer PluXML...
--
le deuxieme example
--
J'ai déja testé, mais j'ai sendoute fait une erreur pas la peine de vous expliqué (lol)
Déjà, onClick est invalide. On ne met pas de majuscule
Ensuite, je propose plutôt une fonction javascript qui, lors d'un clic sur l'image, affiche le code de href.
Même si je ne suis pas doué en javascript, ça peut être simple ^^
Je recherche un petit mod très simple, car je suis en cours de skinner un pluxml, et je voudrais ajouter des balises dans l'écriture d'un article, je voudrais bien celles que tu as faites, mais en plus avancer. Si un programmeur pourait me le faire...
Voici les balises :
- Gras
- Italique
- Souligne
- Insertion d'image
- Insertion de Lien
- Couleur du Texte
- Grandeur du texte ( Normal, Moyen, Gros )
Je compte donner mon rendu à un groupe de musique pour y faier leur site internet basé sous pluxml car c'est facile, sauf dans l'écriture d'un articles, il n'y connaissent rien, donc j'aimerais ajouter des balises.