Intégration CKeditor

Version imprimable

Bonjour à tous,
Je suis nouveau sur ce site donc ne m'en voulez pas si ce sujet a déjà été édité au par avant.

J'ai un gros problème, j'ai réalisé un formulaire d'envoi de mail qui marche très bien et j'aurais aimé ajouter une petite touche final a celui-ci: j'aimerais ajouter le module CKEditor à mon textarea "Commentaires" mais tout bloc j'ai beau chercher sur internet tout les tutos ou exemples sur CKEditor mais (soyons clair) je n'y comprends rien!! :(

Si quelqu'un pourrait me guider un peu plus que sur les simples tutos que l'on trouve sur le net, ce serrai génial!! :D

Je vous fournis le code de mon formulaire plus bas, merci d avance pour votre aide!

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?php
session_start();
?>
<html>
<script language="JavaScript">
function couleur(obj)
{
	//  Nous appliquons simplement une couleur d'arrière plan aux objets traités  /
     obj.style.backgroundColor = "#FFFFFF";
}
 
function check()
{
	var msg = "";
 
//  Vérification du mail s'il n'est pas vide on vérifie le . et @  //
		if (document.NousContacter.Email.value != "")	{
		indexAroba = document.NousContacter.Email.value.indexOf('@');
		indexPoint = document.NousContacter.Email.value.indexOf('.');
		if ((indexAroba < 0) || (indexPoint < 0))		{
 
//  Dans le cas ou il manque soit le . soit l'@ on modifie la couleur d'arrière plan du champ mail et définissons un message d'alerte  //
			document.NousContacter.Email.style.backgroundColor = "#F3C200";
			msg += "Le mail est incorrect\n";
		}
	}
 
//  Notre champs mail est vide donc on change la couleur et on défini un autre message d'alerte  //
 
	else	{
		document.NousContacter.Email.style.backgroundColor = "#F3C200";
		msg += "Veuillez saisir votre mail.\n";
	}
 
//  Ici nous vérifions si le champs nom est vide, changeons la couleur du champs et définissons un message d'alerte  //
if (document.NousContacter.Nom.value == "")	{
		msg += "Veuillez saisir votre nom\n";
		document.NousContacter.Nom.style.backgroundColor = "#F3C200";
	}
 
//  Meme manipulation pour le champ prénom  //
if (document.NousContacter.Prenom.value == "")	{
		msg += "Veuillez saisir votre prenom\n";
		document.NousContacter.Prenom.style.backgroundColor = "#F3C200";
	}
 
//  Meme manipulation pour le champ Commentaire  //
if (document.NousContacter.Commentaires.value == "")	{
		msg += "Veuillez saisir le champ Commentaire\n";
		document.NousContacter.Commentaires.style.backgroundColor = "#F3C200";
	}
 
//  Meme manipulation pour Captcha  //
if (document.NousContacter.userCode.value == "")	{
		msg += "Veuillez saisir le Code\n";
		document.NousContacter.userCode.style.backgroundColor = "#F3C200";
	}
 
//  Si aucun message d'alerte a été initialisé on retourne TRUE  //
	if (msg == "") return(true);
 
//  Si un message d'alerte a été initialisé on lance l'alerte  //
	else	{
		alert(msg);
		return(false);
	}
}
</script>
 
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
 
<head>
<meta http-equiv="Content-Type" charset=utf-8 content="text/html; >
 
<style type="text/css">
	a img{
		border: none;
	}
</style>
<title>Formulaire</title>
</head>
 
<body BGCOLOR="#262626">
<!-- // Formulaire Email // -->
<form action="formulaireMail.php" method="post" enctype="application/x-www-form-urlencoded" name="NousContacter"  onSubmit="return check();">
			<table>
			<tr><td><font color="#ffffff"><u>Email :</u></font></td>
 			    <td><input type="text" name="Email" size=30 onKeyUp="javascript:couleur(this);"></td></tr>
 			<tr><td></td></tr>
			<tr><td><font color="#ffffff"><u>Votre Nom :</u></font></td>
    			<td><input type="text" name="Nom" size=30 onKeyUp="javascript:couleur(this);"></td></tr>
			<tr><td><font color="#ffffff"><u>Votre Prenom :</u></font></td>
  			    <td><input type="text" name="Prenom" size=30 onKeyUp="javascript:couleur(this);"></td></tr>
  			<tr><td><colspan=2><font color="#ffffff"><u>Commentaires :</u></font><br></td>
 				<td><textarea COLS=50 ROWS=6 name=Commentaires></textarea></td></tr>
 			<tr><td></td>
 				<td><label for="captchaCode"><font color="#ffffff"><u>Entrer le code :</u></font><br> <img src="captcha.php" alt="Captcha" id="captcha" />
 				<!-- // (JavaScript) Changer d'image à la volée si elle est illisible // -->
 				<a style="cursor:pointer" onclick="document.images.captcha.src='captcha.php? id='+Math.round(Math.random(0)*1000)+1"><img src="boutonActualiser.png"></a>
				<br></label>
  				<input type="text" name="userCode" id="userCode" /><br /></td></tr>
 
			<tr><td></td>
				<td><input border=0 src="boutonValider.png" type="image" name="submit" value="submit"></td></tr>
		</table>
</form>
<!-- // Fin du formulaire Email  // -->
 
</body>
</html>

essaye de mettre ça pour ta zone de texte

Code:

1
2
3
4
5
6
7
8
<textarea cols="50" rows="6" name="Commentaires" id="Commentaires"></textarea>                
<script type="text/JavaScript">
//<![CDATA[
    
    CKEDITOR.replace('Commentaires');
 
//]]>
</script>

17/05/2010, 08h58
morganC

Merci et.rond.et.rond :ccool:

ça marche très bien, je cherchais bien plus compliqué!!

je vais donc maintenant essayé de retirer des options car il y en à trop, si jamais a déjà vu comment faire ça m'éviterait de perdre une journée :?
17/05/2010, 09h27
Dinous09

Salut pour gérer la configuration de la toolbar tu peux utiliser un fichier de config que tu vas mettre à la racine du répertoire CKEDITOR.
Il devra s'appeler config.js et par exemple tu peux mettre :

Citation:

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'fr';
config.entities_latin = false;
config.toolbar_Basic_sidoc =
[['Source'],
['ref-editor','ref-editor-edit' ]
];

config.toolbar_Basic_template_sidoc =
[['Source'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['NumberedList', 'BulletedList'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],['Maximize'],
['ref-editor','ref-editor-edit','-','Templates' ]
];

config.toolbar = 'Basic_sidoc';

};

Là tu peux voir que j'ai redéfinis deux toolbar une vraiment basique et une avec un peu moins d'option que toute.
Puis avec

Citation:

config.toolbar

tu lui dis laquelle tu veux utiliser.

Voilà !

Bonne journée

Merci pour ta réponse Dinous09, j'ai repris ton exemple et je l'ai adapté comme je le voulais pour en faire ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CKEDITOR.editorConfig = function( config )
{
//  Configuration des options de la barre  //
config.language = 'fr';
config.entities_latin = false;
config.toolbar_Basic_template_sidoc =
[['Source'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['NumberedList', 'BulletedList'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-'],
['Styles','Format','Font','FontSize'],
['Maximize']
];
 
config.toolbar = 'Basic_template_sidoc';
 
};

Je suis désolé d'insister avec CKEditor qui et son intégration qui en effet est "simple"(pour mon formulaire) mais je meurt a un 2ème problème a propos de son intégration, je m'explique : je voudrais maintenant intégrer la barre d'outil CKEditor à mon formulaire d'ajout de news du coté administrateur.

(quand je me connecte a mon site en admin, je peux ajouter des news a travers le navigateur et un formulaire ce qui m'évite de toujours aller dans phpMyAdmin pour créer, supprimer, ... mes news)

L'architecture Administrateur ce présente comme ça :

admin------------|
(index.php, ...) |->modules-|
|->newsbar---------|
(form.inc.php) |->ckeditor (le dossier dézipé de ckeditor)

Etant donnée que je me sers d'un formulaire et d'un textarea j'ai utilisé le même code que celui de mon formulaire pour faire appel à la barre CKEditor mais elle ne s'affiche pas.
je vous joint donc ci-dessous mon code de la page form.inc.php

Merci pour votre aide. ;)

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?php
include('ckeditor/ckeditor.php');
 
$action = get_param('a');
$newsId = get_param('n');
 
if('mod' == $action && false !== $newsId && is_numeric($newsId) && 0 < $newsId) {
	$query =
		'SELECT n_date, n_title, n_comment '.
		'FROM newsbar '.
		'WHERE n_id = '.$newsId;
 
	connect_mysql();
	$resultSet = @mysql_query($query);
	close_mysql();
	if(false === $resultSet) {
		err('QUERY ERROR');
		return;
	}
	else if(0 == mysql_num_rows($resultSet)) {
		err('Aucune actualité enregistrée.');
		return;
	}
 
	$action = 'vmod';
 
	$row = mysql_fetch_array($resultSet);
	//$date    = $row[0];
	$title   = $row[1];
	$comment = $row[2];
}
else {
	$newsId = 0;
	$action  = 'vadd';
	$title   = '';
	$comment = '';
}
 
$date    = date('YmdHi00');
 
?>
 
<form id="frmnews" name="frmnews" method="post" action="index.php">
	<a class="back2list" href="index.php?m=<?= $moduleName ?>">Retour à la liste des actualités (barre latérale).</a>
	<hr class="separator"/>
	<input type="hidden" name="m" value="<?= $moduleName ?>"/>
	<input type="hidden" name="a" value="<?= $action ?>"/>
	<input type="hidden" name="n" value="<?= $newsId ?>"/>
	<div>
		<label for="hrdate">Date</label>
		<input id="date" type="hidden" name="date" value="<?= $date ?>" readonly/>
		<input id="hrdate" type="text"  name="hrdate" value="<?= hrDate($date) ?>" readonly/>
	</div>
	<div>
		<label for="title">Titre</label>
		<input id="title" type="text" name="title" value="<?= $title ?>"/>
	</div>
 
		<div><label for="comment">Texte</label>
            <textarea cols="75" rows="8" name="Comment" id="Comment"></textarea>
            <script type="text/JavaScript">
            //<![CDATA[
                CKEDITOR.replace('Comment');
            //]]>
            </script>
		<div class="note">Note : le retour à la ligne standard s'effectue par la combinaison des touches &lt;<em>Majuscule + Entrer</em>&gt;</div>
		</div>
	<div id="submit"><input type="submit" value="Valider"/></div>
</form>
 
 
<?/*
if('vmod' != $action)
	return;
else
	include('photo.inc.php');
*/?>

20/07/2010, 11h50
khalidmip

Bonjour,

je ne connais pas trop ckeditor, mais j'ai remarqué quelques erreurs sur ton code :
enfait c'est

Code:

<?php ?>

, et pas

Code:

<?= ?>

il faut remplacer

Code:

<?= $moduleName ?>

et reste des endroits où il y a une "<?= ?> par

Code:

<?php $nomVariable?>

Bonne journée