Discussion :

[krislec]

Bonjour à tous,

Je cherche à savoir comment faire pour modifier certain mot dans un textarea. Je cherche mais je me noie dans tout ce que je lis !

Je cherche à refaire sur mon site ce que l'on peut faire sur un champ textarea sans voir les balise "[B]" ou "[COLOR]" quand on écrit.

Faut-il installer un kit javascript en plus ? JQuery ???

Merci de votre aide.

Un novice.

[xess91]

salut,

tout dépend si tu veux développer ça toi même ou si tu veux utiliser une bibliothèque mais le principe et assé simple.

il te suffit de faire une fonction sur un "onclick" qui écrit dans le textarea :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function ecrire(id du textarea "text1", la valeur à écrire "valeur rouge")
{
if(la valeur à écrire == valeur rouge){
//ici tu récupères la valeur du textarea, ce qu'il y a déjà de saisie//
var valeurActuelle = document.getElementById(text1).value;
//ici tu rajoute la valeur + le bbcode//
document.getElementById(text1).value = valeurActuelle+"[color:red][/color]";
}
}

et après au moment de l'enregistrement dans la base de données ou à la lecture tu utilises les expressions régilières pour convertir les bbcodes en html.

Voila dans le principe, mais biensur ce n'est pas aussi simple que ça car si tu veux créer une palette de couleur qui génère un code couleur ou si tu veux que le bbcode s'ajoute à l'endroit du curseur et quand plus après l'ajout le curseur se positionne entre les deux balises ou aussi si tu veux que losrque tu surligne un mot les balises entour ce mot, la ça se complique !

Il existe une fonction javascript qui gère la position du curseur dès que je me rappel laquelle c'est j'éditerai mon post.

Bon courage

[andry.aime]

Bonjour,
Fait un recherche sur "editeur wysiwyg javascript".

[krislec]

Je préfèrerai developper mon propre code mais cela me parait un peu compliqué pour moi...
Maintenant c'est en codant qu'on apprend....

@xess91: merci pour ton bout de code. C'est ce que "j'entrevoyai"! mais effectivement le texte rajouté doit ce situé entre les 2 balise, au niveau du curseur .... Bref merci pour le début. Pour ce qui est d'une pallette de couleur, je n'ai besoin que de 2 ou 3 couleurs prédéfinies. Je voudrais également ne pas voir les bbcodes. Je vais tenter un bout de code...

@andry.aime : "editeur wysiwyg javascript" mes recherches seront plus facile...

Merci à tous les deux, je vais travailler tout ça.

[krislec]

Bon, je suis vraiment trop nul en javascript (et qui plus est impatient voire pressé) que je vais tenter l'import de code de gens qui savent mieux faire que moi !

J'ai trouvé ce qu'il me fallait (bien que encore un peu trop complet) :
http://www.gosu.pl/STEditor/

Free selon l'auteur, doit-je l'informe de mon utilisation (site perso en intranet) ,notamment si je modifie le code ? Exemple:

j'ai pour la mise en gras une ligne :

Code :

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

1
2
html += '<td class="button"><img src="'+this.path+'images/bold.gif" width="20" height="20" alt="Bold" title="Bold" onclick="'+this.objectId+'.execCommand(\'bold\')"></td>';
	html += '<td class="button"><img src="'+this.path+'images/R.gif" width="20" height="20" alt="red" title="red" onclick="'+this.objectId+'.execCommand(\'red\')"></td>';

j'ai copié/collé ce code et remplacé bold par red, mais je crains que la méthode soit trop simpliste puisque cela ne fonctionne pas !

K.

[krislec]

Ca y est !

Code :

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

execCommand(\'foreColor\',\'red\')"

http://fr.jsinfo.wikia.com/wiki/ExecCommand

(Que c'est bon de trouver seul... ou presque !)

Encore merci pour votre aide.

[krislec]

J'en reviens à mon éditeur :

Comment faire pour déclencher l'enregistrement du texte sur un onblur=submit(); ?

Je ne veux pas (si c'est possible) utiliser de button submit.

J'ai bien mis onblur=submit(); dans la balise textearea ou iframe : rien n'y fait l'enregistrement ne se fait pas....

[krislec]

onclick fonctionne :

Code :

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

<input type=\"text\" value=\"submit\" onclick=\"ste.submit()\" >

mais

Code :

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

1
2
3
4
5
<textarea id=\"pci\" name=\"pci\" wrap=\"physical\" onblur=\"ste.submit()></textarea>;
<script type=\"text/javascript\">;
        var ste = new SimpleTextEditor('pci', 'ste');
	ste.init();
</script>;

ne fonctionne pas.

????