Intégration CKeditor

**morganC** · 14/05/2010, 16h27

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!!

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

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
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>

**et.rond.et.rond** · 15/05/2010, 09h46

essaye de mettre ça pour ta zone de texte

Code HTML :

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

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>

**morganC** · 17/05/2010, 08h58

Merci et.rond.et.rond

ç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

**Dinous09** · 17/05/2010, 09h27

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 :

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

config.toolbar

tu lui dis laquelle tu veux utiliser.

Voilà !

Bonne journée

**morganC** · 17/05/2010, 10h14

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 :

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
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';
 
};

**morganC** · 17/05/2010, 16h06

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 :

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
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');
*/?>