développer un WYSIWYG from scratch

**flasheur** · 29/03/2011, 05h59

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** · 29/03/2011, 07h15

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** · 29/03/2011, 07h45

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 29/03/2011, 07h54

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

**dukej** · 29/03/2011, 13h15

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.

**SpaceFrog** · 29/03/2011, 13h30

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]

**flasheur** · 29/03/2011, 20h34

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)

développer un WYSIWYG from scratch

JavaScript

Vue hybride

Discussions similaires

Partager

Partager