développer un WYSIWYG from scratch

Version imprimable

29/03/2011, 05h59
flasheur

développer un WYSIWYG from scratch

Bonjour,

Je dois intégrer un éditeur de WYSIWYG dans un site et je dois impérativement le développer moi-même, ceux qu'on trouve gratuits sur google sont beaucoup trop compliqués par rapport à la demande client, pour deux raisons:

- Il va être utilisé par des gens qui n'ont jamais bossé pour le web, qui ont une très mauvaise connaissance des trucs du web et des ordinateurs en général

- La mise en page doit coller parfaitement à la charte du site, y'a très peu de typos différentes, je dois y mettre très peu de boutons: gras, italique, insérer et positionner image, insérer lien, deux trois classes css toutes faites pour les titres... bref un truc assez ciblé qui va pas coller avec une solution générique

bref si j'utilise les éditeurs tout faits super compliqués, ils vont être largués ... donc il faut que je développe un truc simple moi-même

J'ai passé 2 plombes à chercher sur google et je trouve rien qui me guide sur la marche à suivre... j'ai trouvé de la doc sur les execCommand mais apparemment ça marche que sur iexplorer

est-ce qu'il faut bêtement analyser la chaine de caractères selectionnée et ajouter/virer des balises pour garder un truc cohérent, ou est-ce que y'a des fonctions natives compatibles ie/mozilla qui gèrent ça automatiquement ?
29/03/2011, 07h15
flasheur

Houlàlà... après une plombe supplémentaire de recherche je suis toujours largué, ça m'a pas l'air super clair...

Apparemment il faut utiliser un va-et-vient entre un div éditable et un textArea et je capte pas bien pourquoi

si on est logique, le script analyse ce qui a été selectionné dans le div, et puis il modifie le code html en conséquence, donc je vois pas bien ce que vient faire le textArea là dedans...

bon donc je démarre par le commencement...

je commence par regarder ce que me renvoie ma sélection:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <head> <script type="text/javascript"> function getSelected() { if (document.selection) return document.selection.createRange().text ; // IE else if (window.getSelection) return window.getSelection(); // Netscape } function test() { alert( getSelected() ); } </script> </head> <body> <div contentEditable="true">Le soleil vient de se lever l'ami ricoré.</div> <a href="javascript:test();">test</a> </body>
là ça me renvoie le texte sans le code html. donc c'est pas bon, j'ai besoin d'une fonction qui me renvoie le code html...

je sais pas si planquer un textarea derrière pourrait servir à quelque chose...

29/03/2011, 07h54
flasheur

bon là de toutes façons ça me sert à rien le résultat renvoyé, il me faudrait plutôt quelque chose comme un "start" et un "end"

ensuite je peux m'en sortir avec un tableau qui pour chaque index de caractère de la chaine html, enregistre l'index de caractère de la chaine texte simple, et là je m'y retrouve... mais j'ai peur que ça foire au niveau des retour à la ligne

et je me demande s'il y'a pas une technique plus simple
29/03/2011, 13h15
dukej

Tu es en train de te planter une épine dans le pied.
Devoir recoder un RTE à la main c'est du pur suicide.

Tu prends TinyMCE, et tu ne mets QUE les icônes dont tu as besoin.

Les RTE existants n'ont rien de compliqués, ils ont juste une tonne d'options, mais c'est à toi de configurer quelles options tu veux afficher ou non.

Tu mettras 10x plus de temps à recoder un RTE bancal dont tu n'es même pas sur du résultat, que d'implémenter un RTE existant en ne mettant que les options nécessaires.
29/03/2011, 13h30
SpaceFrog

Sinon il en existe maintenant plein avec jquery par exemple
[ame="http://www.google.com/search?sourceid=captaincaveman&hl=fr&hl=fr&q=jqeury+rte#sclient=psy&hl=fr&q=jquery+rte&aq=f&aqi=&aql=&oq=jqeury+rte&pbx=1&fp=4d4b2159c80d273f"]jquery rte - Recherche Google[/ame]
29/03/2011, 20h34
flasheur

Citation:

Envoyé par dukej

Tu es en train de te planter une épine dans le pied.
Devoir recoder un RTE à la main c'est du pur suicide.

pourquoi t'as déjà essayé d'en dev un ?

moi je me méfie des wysiwyg tout faits parce que y'en a qui font pas les choses bien (je le souviens de celui de la version gratos de typepad, ça plantait de partout)

je veux être bien sûr du truc, qu'il prenne bien le temps d'analyser toute la structure html de ma page pour éviter qu'il rajoute des balises n'importe où, qu'il prenne bien soin d'en virer là ou il faut virer des balises avant d'en mettre ailleurs, ou alors de signaler des erreurs à l'user (genre lui dire nan t'as pas le droit de faire ça ici)
29/03/2011, 20h54
flasheur

Citation:

Envoyé par SpaceFrog

Sinon il en existe maintenant plein avec jquery par exemple
jquery rte - Recherche Google

je vais regarder ça...

en fait si je dois récupérer un code tout fait j'aurais juste besoin d'une fonction - mais bien faite - qui m'analyse bien tout l'innerhtml avant d'insérer des balises n'importe comment, qui en vire si besoin, ou qui renvoie un message d'erreur genre "selection incohérente"

pour la coder moi-même j'aurais besoin de la technique qui me trouve le "startselection" et le "endselection" au bon endroit dans le code html... après je peux me débrouiller

bon mais si ça me prend un mois à développer moi-même c'est pas la peine j'aurais jamais le temps... je pensais que ça serait jouable en une semaine mais c'est ptêt pas sûr

dans ce cas faut que je choisisse un éditeur tout fait qui soit bien propre, bien sécurisé carré au niveau des risques de bugs html, et qui soit facilement paramétrable pour que je puisse y mettre exactement les balises que je veux
29/03/2011, 21h42
flasheur

Bon donc récapitulatif si jamais je dois prendre un éditeur tout fait il faut impérativement qu'il puisse:

- être facilement paramétrable (que ça prenne pas plus de temps que de tout redévelopper moi-même)

- que je puisse y mettre un field qui applique mes propres classes css et les balises que je veux où je veux (par ex une balise <font class="maclass"></font>, une balise <h1>, <h2>, <h3>, etc)

- qu'il soit hyper carré quand à la correction des bugs html, qu'il n'imbrique pas les balises n'importe comment, qu'il empêche les mecs de faire n'importe quoi, qu'il dégage les balises si besoin, bref qu'il soit 100% fiable quand à avoir un résultat exempt de tout bug de html

- qu'il puisse me mettre des images où on veut, calées à gauche, à droite, etc

- que je passe pas une semaine à en essayer une tonne avant de trouver le bon

Si ça n'existe pas alors je dois le développer moi-même.
29/03/2011, 22h29
flasheur

j'ai regardé la lib jquery, j'ai pas besoin d'un machin aussi énorme qui sait faire une tonne de trucs dont j'ai pas besoin
si je la prends tel quel bonjour le gâchis de bande et de ram... et je vais pas comprendre comment ça marche en 5 minutes...

y'a pas moyen d'isoler les fonctions qui servent à faire du wysiwyg ?
29/03/2011, 23h06
dukej

Citation:

Envoyé par charognard

pourquoi t'as déjà essayé d'en dev un ?

moi je me méfie des wysiwyg tout faits parce que y'en a qui font pas les choses bien (je le souviens de celui de la version gratos de typepad, ça plantait de partout)

je veux être bien sûr du truc, qu'il prenne bien le temps d'analyser toute la structure html de ma page pour éviter qu'il rajoute des balises n'importe où, qu'il prenne bien soin d'en virer là ou il faut virer des balises avant d'en mettre ailleurs, ou alors de signaler des erreurs à l'user (genre lui dire nan t'as pas le droit de faire ça ici)

Oui ils peuvent le faire :
Les rte comme tinyMCE ou Ckeditor sont plus que complet, ils proposent des tonnes de choses.
Recoder toi même un RTE reviens à réinventer la roue et se planter droit dans le mur.
Ces RTE possèdent une communauté, une doc, ils existent déjà dans pleins de CMS.
En ce qui concerne Tinymce il est entièrement paramétrable, tu peux coder tes propres plugins, tu en prends un existant, tu le dupliques et tu le modifies. J'avais mis 3 jours à faire un plugin qui permettait de générer des tableaux complexes. J'ai juste eu à modifier le plugin des tableaux mais en lui apportant pleins d'options.

Réinventer la roue t'obligerai à refaire tout le coeur d'un RTE, la sélection le mode HTML ou code, etc, etc.
En utilisant un rte existant (tinymce dans le cas actuelle) tu aura juste à trouver des plugins qui t'intéresse un peu.

Va lire un peu la doc ou regarder les exemples, il y a tellement de doc et d'exemples et de plugins que je ne comprends pas pourquoi tu t'obstines à en recoder un.
29/03/2011, 23h07
dukej

Citation:

Envoyé par charognard

j'ai regardé la lib jquery, j'ai pas besoin d'un machin aussi énorme qui sait faire une tonne de trucs dont j'ai pas besoin
si je la prends tel quel bonjour le gâchis de bande et de ram... et je vais pas comprendre comment ça marche en 5 minutes...

y'a pas moyen d'isoler les fonctions qui servent à faire du wysiwyg ?

Si déjà tu ne comprends pas une simple librairie JS, tu es mal barré pour coder un RTE. Jquery ne fait pas de wysiwyg mais possède un plugin pour faire du wysiwyg.
30/03/2011, 14h48
flasheur

excuse j'ai pas eu envie de passer des plombes à me taper la doc de jquery alors qu'à la base je suis pas super chaud pour m'en servir... c'est quoi, c'est un émulateur de c# en javascript ?
30/03/2011, 15h46
flasheur

Ha ben voilà j'ai trouvé un truc déjà plus simple

TinyEditor, un petit script de 8ko, qui se débrouille sans usine à gaz jquery c# ou chépakoi

il sait tout faire en 200 lignes de script, et encore la plupart du code sert à afficher les menus... je me disais bien qu'il fallait pas des semaines pour développer un wysiwyg javascript

je vois que ça utilise les execCommand, en fait y'en a plein qui passent sous firefox

bon pour gras/italique/souligné j'ai trouvé là c'est fastoche...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <script type="text/javascript">
        function yo ( bla ) {
		document.execCommand (bla, false, null);
	}		
    </script>
</head>
<body>
	<div>
		<button onClick="yo('bold');">b</button>
		<button onClick="yo('italic');">i</button>
		<button onClick="yo('underline');">u</button>
	</div>
	<div contenteditable="true">KikouLolMdr.</div>
</body>

maintenant faut que j'arrive à fourrer mes classes css, là je sais pas si execCommand gère ça

bien là j'arrive à mettre les links headers et paragraphes et font size et color et face en +, rien de difficile jusque là

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<head>
    <script type="text/javascript">
        function yo ( bla ) {
			document.execCommand (bla, false, null);
		}	
		function bl( bla ) {
			document.execCommand ('formatBlock', false, '<'+bla+'>');
		}	
		function lnk () {
			document.execCommand ('createLink', false, 'http://www.google.com');
		}
		function unlnk () {
			document.execCommand ('unLink', false, null);
		}
		function size (size) {
			document.execCommand ('fontSize', false, size);
		}
		function col ( co ) {
			document.execCommand ('foreColor', false, co);
		}
		function face ( fa ) {
			document.execCommand ('fontName', false, fa);
		}
    </script>
</head>
<body>
	<div>
		<button onClick="yo('bold');">b</button>
		<button onClick="yo('italic');">i</button>
		<button onClick="yo('underline');">u</button>
		<button onClick="bl('h1');">h1</button>
		<button onClick="bl('h2');">h2</button>
		<button onClick="bl('p');">p</button>
		<button onClick="lnk();">lien</button>
		<button onClick="unlnk();">virer lien</button>
		<button onClick="size(1);">petit</button>
		<button onClick="size(5);">gros</button>
		<button onClick="col('#CC0000');">rouge</button>
		<button onClick="face('Arial Black');">Arial Black</button>
	</div>
	<div contenteditable="true">tap ton txt</div>
</body>

par contre pour mes histoires de class jsuis toujours kéblo, je crois que ça marche pas avec les execCommand, apparemment faut faire un truc qui crée un objet html et puis ensuite changer sa prop style

bon si j'y arrive pas tant pis ils auront qu'à se débrouiller avec size/face

le dernier truc qu'il me reste à mettre en place c'est pouvoir faire des images qui s'incrustent dans les blocs de texte... là je ne sais pas bien comment faire ça...

31/03/2011, 03h29
flasheur

bon ben à priori j'ai réussi à faire tout ce que je voulais... il me reste à faire un petit toggle pour uniformiser le format

je reviendrai peut-être demander de l'aide + tard

mon p'tit code de test pour les curieux:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<head>
    <script type="text/javascript">
 
        function yo ( bla ) { document.execCommand (bla, false, null); }    
        function bl( bla ) { document.execCommand ('formatBlock', false, '<'+bla+'>'); }    
        function lnk () { document.execCommand ('createLink', false, 'http://www.google.com'); }
        function unlnk () { document.execCommand ('unLink', false, null); }
        function size (size) { document.execCommand ('fontSize', false, size); }
        function col ( co ) { document.execCommand ('foreColor', false, co); }
        function face ( fa ) { document.execCommand ('fontName', false, fa); }
 
        function insertHTML ( code ) {
            if ( document.selection ) { // iexplorer caca
                var obj=document.getElementById('edit').focus();
                document.selection.createRange().pasteHTML(code);
            } else {
                document.execCommand ('InsertHTML', false, code); 
            }
        }
        function insertImage( align ) {
            // ajouter un prompt ici            
            if (align=='none') { insertHTML ( '<img src="avatar.JPG">' ); }
            if (align=='left') { insertHTML ( '<img src="avatar.JPG" align="left" hspace="8" vspace="8">' ); }
            if (align=='right') { insertHTML ( '<img src="avatar.JPG" align="right" hspace="8" vspace="8">' ); }
        }
    </script>
</head>
<body>
    <div>
        <button onClick="yo('bold');">b</button>
        <button onClick="yo('italic');">i</button>
        <button onClick="yo('underline');">u</button>
        <button onClick="bl('h1');">h1</button>
        <button onClick="bl('h2');">h2</button>
        <button onClick="bl('p');">p</button>
        <button onClick="size(1);">petit</button>
        <button onClick="size(3);">moyen</button>
        <button onClick="size(5);">gros</button>
        <button onClick="col('#CC0000');">rouge</button>
        <button onClick="face('Arial Black');">Arial Black</button>
        <button onClick="face('Verdana');">Verdana</button>
    </div>
    <div>
        <button onClick="lnk();">lien</button>
        <button onClick="unlnk();">virer lien</button>
        <button onClick="insertImage('none');">image simple</button>
        <button onClick="insertImage('left');">image incrustée à gauche</button>
        <button onClick="insertImage('right');">image incrustée à droite</button>
    </div>
    <br/>
    <div id="edit" contenteditable="true" style="font-family:Verdana, Helvetica, Sans Serif; border-width:1; border-color:#000000; border-style:dashed;">tap ton txt</div>
    <div id='txt'></div>
</body>

merci moi-même de m'être aidé tout seul :D

heu je vois que y'a un mec qui met des tôles à tous mes posts ou je parle des execCommand...

par curiosité j'aimerais avoir son avis là dessus

les execCommand c'est spécialement fait pour faire du wysiwyg nativement en appelant du beau code c++ tout propre derrière donc je pije pas bien pourquoi ça l'irrite

j'ai réussi à faire tout ce dont j'avais besoin avec seulement 7 petites fonctions javascript donc je vois pas trop l'interêt de me prendre la tête avec le jquery super compliqué

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function yo ( bla ) { document.execCommand (bla, false, null); } // execCommand simple (gras italique souligné...)		
function bl( bla ) { document.execCommand ('formatBlock', false, '<'+bla+'>'); } // p/titre/div...
 
function lnk () { document.execCommand ('createLink', false, 'http://www.google.com'); }
function unlnk () { document.execCommand ('unLink', false, null); }
 
function setAttr ( attrName, objName ) { // ATTRIBUT FONT
	var o = document.getElementById(objName);
	document.execCommand ( attrName, false, o.value );
}
 
function insertHTML ( code ) { // insertion de code html
	if ( document.selection ) { // iexplorer caca
		document.getElementById('editableDiv');
		document.selection.createRange().pasteHTML(code);
	} else {
		document.execCommand ('InsertHTML', false, code); 
	}
}
function insertImage( align ) {
	// ajouter un prompt ici			
	if (align=='none') { insertHTML ( '<img src="./avatar.JPG">' ); }
	if (align=='left') { insertHTML ( '<img src="./avatar.JPG" align="left" hspace="8" vspace="8">' ); }
	if (align=='right') { insertHTML ( '<img src="./avatar.JPG" align="right" hspace="8" vspace="8">' ); }
}

02/04/2011, 23h49
flasheur

ouais bon okay en fait je vois le problème posé par les ecexcommand, d'un navigateur à l'autre ça encode le html de façon complètement différente donc ça peut vite être le bazar

donc ok je pije l'interêt de passer par un plugin à la place.

quitte à passer par un plugin, ça serait pas mieux de faire le boulot avec flash player ?