Simple raccourci xHTML

p0w · février 2007

Bonjour,

Dans l'esprit de légèreté de Pluxml, j'aimerais rajouter des fonctions pour l'écriture d'article, j'ai vu dans cette discussion :: [ http://forum.pluxml.org/viewtopic.php?id=342 ]

L'ajout de Tinymce, mais beaucoup trop lourd et beaucoup trop long a charger a mon goût ce qui explique ma reponse ici

Donc je voulais savoir, pourquoi ne pas rajouter des liens hypertexte juste au dessus du block d'écriture ?
Juste une ligne ou nous verrons
Gras Italique - Gauche Centrer Droite - URL IMG - ...

Ensuite la ligne peut mener a la fonctions tag_xhtml.php par exemple; quand on clique sur un des liens on aura:
Gras: il nous affiche directement le code <strong></strong>
Italique: <em></em>
Gauche: <p align=left></p>
Centrer: <p align=center></p>
Droite: <p align=right></p>
URL: <a href=""></a>
IMG: <img scr="" />

Tout ce qu'il y a de basique, un peu comme PunBB avec une Puntoolbar si vous voyer

Le tout simplement qu'avec des liens hypertexte pour ne pas alourdir Pluxml et pour avoir la possibilité pour chaque débutant de rajouter leur propres codes.
Désolé si je me suis mal exprimer, j'espère pouvoir faire passer le message au moins

Bonne journée

AddiKT1ve · février 2007

Ou même des petites images après tout

.

Au moins 60 secondes doivent s'écouler entre deux messages. Merci de patienter quelques instants et essayer à nouveau.

Bordel ! Changez ça...

Ali · février 2007

Oui c'est une bonne idée... mais il me semble qu'il y a eu déjà des balises réalisées de ce style là... faut rechercher, je crois même être sûr.

Diti · février 2007

Salut,

C'est officieusement prévu, j'allais terminer ça et le proposer à Skyline en même temps que la doc

En fait, j'utilise Javascript et ses document.write(); pour afficher les liens (des images, si vous voulez), car comme l'intégration du code à la <textarea> se fait en Javascript, si ça ne fonctionne pas il ne faut pas importuner le rédacteur

p0w, pour ton code : <p align="machin"> est invalide XHTML 1.0 Strict, <img /> a un attribut alt obligatoire, et <strong>/<em> ne signifient pas gras/italique

p0w · février 2007

Erf voila la preuve qu'il faut ces petites functions ! :P
Est-ce qu'il sera prévu un 'manuel' ou la possibilité de rajouté des balises que nous voulons, nous ? :rolleyes:

ICS · février 2007

Dans la série des éditeurs en javascript, il y a eazyedit, qui est tout léger (une 20aine de K), qui pourrait peut-être être intégré à pluxml ? (http://www.easyglobule.freesurf.fr/fr/index.html)

p0w · février 2007

Apparement il ne fonctionne qu'avec IE ?

Diti · février 2007

p0w a écrit:

Apparement il ne fonctionne qu'avec IE ?

Exact, de toutes façons là n'est pas la question. Il faut un truc simple.
Tiens d'ailleurs, quelqu'un pourrait m'indiquer comment se servir d'un array(); pour faire une partie "configuration" en Javascript ?

Ali · février 2007

Oui c'est trop complexe... le truc tout simple c'est :

Gras, Italique, Souligné, Couleur, Taille, Aligner au centre/gauche/droite, Citation, Code, Image, URL

Voilà, et ça suffit... un WYSYWIG c'est trop complexe...

Diti · février 2007

@Skyline : Est-il simple de faire une intégration d'un système tel que Textile, c'est-à-dire qui parse du contenu ? Quand le parser en HTML, d'ailleurs ? Quel(s) fichier(s) toucher ?

@Ali : Sans oublier <blockquote>, <q>, <accronym>, <ins>, <del>...

Skyline · février 2007

Diti a écrit:

@Skyline : Est-il simple de faire une intégration d'un système tel que Textile, c'est-à-dire qui parse du contenu ? Quand le parser en HTML, d'ailleurs ? Quel(s) fichier(s) toucher ?

Oui c'est réalisable et facile si tu utilises une classe GNU existante, le plus gros travail sera de doubler dans chaque fichier d'article la balise <content> histoire de pouvoir séparer l'xhtml du wiki ou autre. Mais ça se fait sans problème dès qu'on connait un peu de php et pluxml

MilkaJinka · mars 2007

Je remonte le sujet car j'aime cette solution : moins lourde que les éditeurs WYSIWYG proposés sur ce forum, moins dépendante de la machine que l'extension It's All Test ou BBCodeXtra.

La PunToolBar, du forum Ubuntu-fr par exemple, ça fonctionne bien et ça semble simple et léger. Dans le source de le page je vois ceci :

<div style="padding-top: 4px">
							<input type="button" value=" B " name="B" onclick="insert_text('[b]','[/b]')" /> 
							<input type="button" value=" I " name="I" onclick="insert_text('[i]','[/i]')" />

							<input type="button" value=" U " name="U" onclick="insert_text('[u]','[/u]')" />
							<input type="button" value="http://" name="Url" onclick="insert_text('[url]','[/url]')" />
							<input type="button" value="Img" name="Img" onclick="insert_text('[img]','[/img]')" />
etc...
</div>

On peut aussi mettre des images :

<a href="javascript:insert_text(':)', '');"><img src="img/smilies/smile.png" width="15" height="15" alt=":)" /></a>

Étant un béotien du Javascript/PHP, je me demande s'il serait simple de faire un truc du genre pour Pluxml (Pluxmedit ?) ?

Le javascript de PunToolBar fait moins de 10ko mais il doit y avoir moyen de faire moins, et si on pouvait personnaliser et ajouter ses raccourcis en deux coup de cuillère à pot avec simplement un onclick="insert_text('<mabalise>','</mabalise>')", ne serait-ce pas à la fois le paradis et tout à fait dans la philosophie de Pluxml ?

gcyrillus · mars 2007

bonjour,

voici ce que j'utilise :

c'est tout betement une version bbcode , repassé en (x)html.

(balise de tableau omises et tag image sans interet car deja dans les fonctions de pluxml).

en include pour le textarea "contenu" :

<div id="editeur">
        <script type="text/javascript" src="../plugins/editeur.js"></script>

<p>
    <b onclick="Insert(22)">h1</b>
    <b onclick="Insert(0)">h2</b>
    <b onclick="Insert(1)">h3</b>
    <b onclick="Insert(2)">h4</b>
    <b onclick="Insert(3)">h5</b>
    <b onclick="Insert(4)">h6</b>
    <b onclick="Insert(5)">p</b>
    <b onclick="Insert(6)">quote</b>
    <b onclick="Insert(7,'Veuillez entrer la definition ',' ')" acceskey="k">accronym</b>
    <b onclick="Insert(8)">strong</b>
    <b onclick="Insert(9)">hr</b>
    <b onclick="Insert(10)">br</b>
    <b onclick="Insert(11)">ul</b>
    <b onclick="Insert(12)">ol</b>
    <b onclick="Insert(13)">li</b>
    <b onclick="Insert(14)">dl</b>
    <b onclick="Insert(15)">dt</b>
    <b onclick="Insert(16)">dd</b>
    <b onclick="Insert(17)">span</b>
    <b onclick="Insert(18)">div</b>
    <b onclick="Insert(19)">i</b>
    <b onclick="Insert(20)">cite</b>
    <b onclick="Insert(21,'Veuillez entrer l\'URL','http://')" title="Insérer une URL. " >a</b>
</p>
</div>

et le script js associer :

var balises = new Array('h2','h3','h4','h5','h6','p','quote','accronym','strong','hr','br','ul','ol','li','dl','dt','dd','span','div','i','cite','a','h1');

var tag=[];//mémorise les tags ouverts
tt=0;
function Insert(id,description,txtDefaut) {
		
	msg=!description?'': // sans paramètres
	!txtDefaut?description: 
	tag[id]!=1?''+prompt(description ,txtDefaut):''; // boite de dialogue sur tag d'ouverture
	text1='<'+balises[id]+msg+'>'; //tag d'ouverture
	text2='</'+balises[id]+'>'; //tag de fermeture
	if(id==9){text1='<'+balises[id]+'/>';} //tag unique hr
	if(id==10){text1='<'+balises[id]+'/>';} //tag unique br
	if(id==7){ text1='<'+balises[id]+' title="'+msg+'" >'}// tag  accronym ) 
	if(id==21){text1='<'+balises[id]+' href="'+msg+'" title="'+msg+'" >'}// tag lien ( a ) 
	if(!tt){ // initialisation
		tt=document.getElementById('contenu');
		moz=tt.selectionStart || tt.selectionStart == 0 ? 1 : 0; // Moz 1.6+, Firefox
		ie=	document.selection ? 1 : 0; // IEWin, Opéra
		}
	tt.focus();
	// sélection de texte :
	txt =	moz ? tt.value.substring(tt.selectionStart, tt.selectionEnd):
 				ie ? document.selection.createRange().text: '';


	if(id==9){tag[9]=text2='' }// tag unique ( hr )
	if(id==10){tag[10]=text2='' }// tag unique ( br )

	if(txt=='') { // pas de texte sélectionné 		
		if(tag[id]){  // tag de fermeture seul
			text1='';tag[id]=0;
			}
		else {      // tag d'ouverture seul
			text2='';tag[id]=1; 
			}
		}

		if (ie) {
				var sel=document.selection.createRange();
				//remplace le contenu du textarea
				sel.text = text1 + txt + text2 
				sel.select(); //place le curseur juste après text2
			}
		
		else if (moz) {
			debut = tt.value.substring(0,tt.selectionStart);
			fin = tt.value.substring(tt.selectionEnd, tt.value.length);
			contenuScrollTop=tt.scrollTop; //sauve le scroll
			//remplace le contenu du textarea
			tt.value = debut + text1 + txt + text2 + fin;
			//place le curseur comme IE
			tt.selectionEnd=tt.selectionStart=(debut + text1 + txt + text2 ).length;
			//empèche le scroll
			tt.scrollTop=contenuScrollTop;
			}

	else { // anciens navigateurs, curseur à la fin de la fenêtre d'édition
		tt.value=tt.value + text1 + text2; 
	}
text=tt.value;

}

pour ajouter des balise , il suffit de les ajouter dans le tableau et ensuite de les appeler par leur numeros.

pour rendre ce script "utilisable" , il est necessaire de donner une id au textarea. Pour cela il suffit de modifier de surcharger legerement la fonction
Printarea() du fichiers lib.util.php

fonctions actuel

function printArea($name, $value='', $cols='', $rows=''){

	echo '<textarea name="'.$name.'" cols="'.$cols.'" rows="'.$rows.'">'.$value.'</textarea>'."\n";
}

a laquelle on ajoute aussi l'id en reprenant la variable utilisée pour name:
Ce qui donne:

function printArea($name, $value='', $cols='', $rows=''){

	echo '<textarea name="'.$name.'"  id="'.$name.'" cols="'.$cols.'" rows="'.$rows.'">'.$value.'</textarea>'."\n";
}

Faite attention au chemin que vous utilisez , le fichier html et ajouté en include et c'est lui qui appel le javascript dans ma façon de faire , mais vous pouvez l'integre directement au fichier "articles.php et appeler le js dans l'entete ou laisser le script dans les balises <script> .

A vous de voir si cela vous sufit et la façon dont vous voulez l'integrer.

un clik , on insere la balise ouvrante (ou fermante) , on selectionne une portion de texte et la balise ouvrante et fermantes sont inserées de part et d'autre du texte selectionné.

Un petit prompt pour donner l'adresse du lien ou la "definition" d'un accronym , bien entendu le script est assez leger et clair (amha) pour que vous l'utilisier/modifier a vos besoins.

GC

Diti · mars 2007

Moua©f, ta version est pas valide gcyrillus :P
Personnellement, je pense que la meilleure utilisation est faite à la main. C'est le meilleur moyen pour progresser.

gcyrillus · mars 2007

ah , j'avais oublié le css que je met avec :

b {
        border:2px outset;
        background:#eee;
        margin:5px  0 5px 5px;
        padding:0 5px;
        cursor:pointer;
        float:left;
}

Pas valide ,

, tu peut devellopper ?parceque si tu parle de progresser , ça m'interesse , c'est justement la raison pour laquel je poste , avoir aussi des retour

.

si c'est pour le code produit. heu , les br et hr sont refermé , et puis si on ouvre un paragraphe , bah faut pas oublié de le refermé

quand même ,
ç'a aide a l'edition et ce n'est pas une application a part entiere, hein . D'ailleurs ça ne merite même pas d'etre une beta de quoi que ce soit

.

le js ? (il y a effectivement un message d'erreur avec ff , gna ! , acceskey pour le prompt , lol ! des fois qu'il n'est pas le focus . (ça je prends pas au serieux , amateur je reste ! )

le html ? on peut repasser les b en input , (la on parle plutot de semantique , accessibilité !? ) et leur attribuer un accesskey peu utile qui risque d'etre pour certains choix, correspondre aux raccourcis clavier de l'OS ou du Navigateur ....

sinon , a la main ?

, oups , j'ai et on a besoin de nos claviers tout de même

Un script plus court et operationnel sous IE, opera et ff ? oui mais a la fin du contenu du textarea (ça, j'aime vraiment pas , surtout quand le textarea fait 5 lignes de hauteur).
Ce n'est pas une copie d'un bbcode extrait d'un forum quelquonque ,
d'ailleurs il n' y a pas enormement de façon d'inserer quelque chose a l'endroit du curseur ou autour de la selection dans un textarea.

Un truc dont je ne suis pas fier du tout (aujourd'hui ) sur lequel j'ai appris (et beaucoup de copier/coller/analyse/tests/modifs ) quelques petites choses qui n'est pas finalisé et qui ne le sera jamais en plan depuis nov 2005 et pour toujours car totalement mal fait , invalide , enfin que des adjectif pejoratifs un essai raté en beauté mais qui fut pour moi "constructif". http://xhtmlcsskits.xooit.net/base.html ,
j'ai en projet quelque chose de beaucoup plus ergonomique , complet , sans trop d'erreurs , prenant en compte les commentaires conditionnels , doctypes , scripts basique , accouplé a du php et ajax(juste pour le confort si supporté) , pour la sauvegarde de fichiers et "decoupe" d'images en lignes . (Enfin un truc qui risque surtout de ne jamais voir le jour , pas assez de base en langages de programation pour envisager quelque chose a court terme ).

Et puis je ne suis pas sur de comprendre ou d'etre compris , je ne pretend rien ni ne vends rien ... , je ne fais que passer sur le forum et comme deja dit ailleurs ici (

), j'apprecie ce peiti cms , qui est a ma porté , pas encore trop gros ou trop compliqué pour moi.

Un autre merci a skyline et a tout ceux qui font de l' "open source"., qui font avancé le smilblick des amateurs comme moi .

GC

p0w · mars 2007

C'est long a la main :P

Diti · mars 2007

Pas plus que si tu dois cliquer 5 fois pour supprimer un lien dans un mot alors que tu n'en voulais pas

Ali · mars 2007

J'ai trouvé sur www.hybrids-square.com un superbe plugins réalisé de la sorte.

Je l'utilise, simple rapide et fonctionnel !

iKs · avril 2007

Diti a écrit:

En fait, j'utilise Javascript et ses document.write(); pour afficher les liens (des images, si vous voulez), car comme l'intégration du code à la <textarea> se fait en Javascript, si ça ne fonctionne pas il ne faut pas importuner le rédacteur

J'fait un petit déterrage (je cherchai un post

) pour dire que document.write(); n'est PAS valide XHTML. Faut utiliser des fonctions DOM pour écrire dans les noeuds XHTML

Diti · avril 2007

Geuh ?
En quoi document.write() ne serait-il pas valide XHTML puisqu'il faut l'insérer dans la page avec un <script type="text/javascript"> valide ?

iKs · avril 2007

Je te retrouve ça

iKs · avril 2007

http://www.hixie.ch/advocacy/xhtml.fr/#p4a
http://ejohn.org/blog/xhtml-documentwrite-and-adsense/

Diti · avril 2007

Hum, c'est pas exactement pareil. Le premier document montre l'invalité du code dans les documents parsés en document/xhtml+xml. Le second nous convaint que les codes générés par document.write() sont invalides, en effet une frame (la frame Adsense) n'a rien à faire en XHTML 1.0 Strict.

Mais je le redis, c'est valide

iKs · avril 2007

C'est pas valide puisque comme tu viens de le dire c'est invalide dans les documents parsés en application/xhtml+xml

Or il ne faut pas te le rappeler, c'est comme ça que devraient être parsés tous les documents XHTML

Pour la relevance des pages j't'avoue que j'ai juste fait une recherche Google rapide. Faut que je retrouve le truc du W3C...

EDIT: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

gcyrillus · avril 2007

mais non voyons tu t'emmele les pinceaux

.

Un document en xhtml 1.0 n'est pas un document xml , tu peut lui ajouté le prologue xml si tu insere effectivement du xml dans le document .

Il suit les regles du xml dans sa contruction , minuscule et balise systematiquement refermé et des imbrications de balises coherentes , la balise <html> devient la balise "racine" ... c'est ce qui fait entre autre que l'on peut stylé <html> quand dans html ce n'est pas possible .

Xhtml n'est pas xml , mais il s'en rapproche Fortement.

Pour ce qui est du dom en javacript , cela fonctionne aussi sur html 4.01 .

Bon maintenant je vois mal serieusement quelqu'un cherché a retrouvé des noeuds d'une architecture html en edition qui se ballade dans un textarea ...

Si il s'agit de modifier en direct un document dans la fenetre du navigateur, un script basé sur "dom" est plus efficace et plus propre ...

cordialement

GC

Simple raccourci xHTML

Réponses