Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 29/03/2011, 05h59   #1
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
Par défaut 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 ?
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 29/03/2011, 07h15   #2
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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...
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 07h45   #3
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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...
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 07h54   #4
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 13h15   #5
Membre expérimenté
 
Duke Jikel
Inscription : mai 2010
Messages : 340
Détails du profil
Informations personnelles :
Nom : Duke Jikel

Informations forums :
Inscription : mai 2010
Messages : 340
Points : 548
Points : 548
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.
dukej est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 29/03/2011, 13h30   #6
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
Sinon il en existe maintenant plein avec jquery par exemple
Click to View Search Results for jquery rte - Recherche Google jquery rte - Recherche Google
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 20h34   #7
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
Citation:
Envoyé par dukej Voir le message
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)
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 20h54   #8
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
Citation:
Envoyé par SpaceFrog Voir le message
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
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 29/03/2011, 21h42   #9
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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.
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 29/03/2011, 22h29   #10
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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 ?
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 23h06   #11
Membre expérimenté
 
Duke Jikel
Inscription : mai 2010
Messages : 340
Détails du profil
Informations personnelles :
Nom : Duke Jikel

Informations forums :
Inscription : mai 2010
Messages : 340
Points : 548
Points : 548
Citation:
Envoyé par charognard Voir le message
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.
dukej est déconnecté   Envoyer un message privé Réponse avec citation 11
Vieux 29/03/2011, 23h07   #12
Membre expérimenté
 
Duke Jikel
Inscription : mai 2010
Messages : 340
Détails du profil
Informations personnelles :
Nom : Duke Jikel

Informations forums :
Inscription : mai 2010
Messages : 340
Points : 548
Points : 548
Citation:
Envoyé par charognard Voir le message
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.
dukej est déconnecté   Envoyer un message privé Réponse avec citation 11
Vieux 30/03/2011, 14h48   #13
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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 ?
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 30/03/2011, 15h46   #14
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 30/03/2011, 17h36   #15
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/03/2011, 18h34   #16
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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...
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 31/03/2011, 03h29   #17
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 31/03/2011, 09h01   #18
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 01/04/2011, 13h07   #19
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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">' ); }
}
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 01
Vieux 02/04/2011, 23h49   #20
Inactif
 
Inscription : novembre 2010
Messages : 166
Détails du profil
Informations forums :
Inscription : novembre 2010
Messages : 166
Points : 126
Points : 126
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 ?
flasheur est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 00h03.


 
 
 
 
Partenaires

Hébergement Web