Ajouter un plugin pour le FCKEditor

**anobiste** · 15/09/2009, 16h03

Bonjour,
voila je debute avec FCKeditor et j ai besoin d un peu d aide:

j ai créé un plugin de test afin d ajouter un boutton a la "ToolBar": /test contenant un fckplugin.js et un test.html et un test.gif:

Bonjour,
Je voulais ajouter un plugin pour le FCKEditor
J ai créé cette arboraissance:
/plugins
/test
fckplugin.js
test.html
test.gif

pr le fckplugin.js:

Code :

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

1
2
3
4
5
6
FCKCommands.RegisterCommand( 'My_test' , new FCKDialogCommand( 'MY_TEST' , 'Titre de la fenetre de test' , FCKConfig.BasePath + 'plugins/test/test.html' , 340, 170 ) ) ;
 
var oTestItem = new FCKToolbarButton( 'My_test', FCKLang['pluginTestName'] ) ;
oTestItem.IconPath = FCKConfig.BasePath + 'plugins/test/test.gif' ;
 
FCKToolbarItems.RegisterItem( 'My_Test', oTestItem ) ;

tout fonctionne: je visualise le nouveau boutton (My_Test): sauf que franchement je ne sais pas l utilité de test.html: autrement dit qu est ce qu on met dedant ou bien carement y a-t-il un exemple basique qui explique tout ça?

Cordialement.

**mlny84** · 16/09/2009, 09h56

Bonjour,

Si tu regardes ta fonction suivante :

Code Javascript :

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

FCKCommands.RegisterCommand( 'My_test' , new FCKDialogCommand( 'MY_TEST' , 'Titre de la fenetre de test' , FCKConfig.BasePath + 'plugins/test/test.html' , 340, 170 ) ) ;

Tu ouvres une Fenêtre de dialogue FCK lorsque tu cliques sur ton nouveau bouton.

La page test.html te permet tout simplement de définir ce que tu veux afficher (input, texte, ...) dans ta fenêtre de dialogue.

Si tu veux un exemple de base, tu regardes par exemple ce qui se produit dans tu cliques sur le bouton pour créer un nouveau lien, et tu compares avec la page dans FCKEditor/editor/dialog/fck_link.html.

**anobiste** · 16/09/2009, 15h01

Bonjour,
je te remercie, ça m'a vraiment aider à comprendre les concepts de base, sinon je trouve que fck_link.html est trop compliquée pour un débutant:

si par exemple je veux visualiser l'explorateur windows et je (je dis n importe quoi) recupere un nom de fichier selectionné.. mon test.html sera comment?
Merci d avance

**mlny84** · 16/09/2009, 15h39

Ce que je te conseille, c'est par exemple de copier-coller l'exemple avec fck_link.html et de supprimer ce qui te semble inutile, en visualisant le rendu à chaque fois, tu vois ce que fais les parties que tu ajoutes ou supprimes.

Si tu veux un exemple plus que simple avec un input de type file, tu peux avoir ça comme body de ta page de test.html :

Code html :

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
<body style="OVERFLOW: hidden" scroll="no">
		<table height="100%" width="100%">
			<tr>
				<td align="center">
					<table border="0" cellpadding="0" cellspacing="0" width="80%">
						<tr>
							<td>
								<span>Mon input text : </span><br/>
								<input id="txt" style="WIDTH: 100%" type="text">
								<br/><br/>
								<span>Mon input fichier : </span><br/>
								<input id="fichier" style="WIDTH: 100%" type="file"/>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>

Ceci est un code d'exemple, je ne l'ai pas testé.
Mais je pense que tu verra ainsi un exemple de ce qu'on peut obtenir.

Après, si tu veux récupérer le contenu de ton input (je l'avais fait qu'avec des input text pour ma part, mais je pense que la méthode est similaire), dans le javascript associé à la page c'est la fonction :

Code :

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

GetE('txt').value

qui te permet d'avoir le contenu de ton champ text. Tu peux voir tout ça dans le fichier js associé à la page fck_link.html (regarde en particulier la fonction ok(), c'est ce qui se passe quand tu appuies sur le bouton OK de la fenêtre de dialogue) ce fichier est dans editor/dialog/fck_link/fck_link.js.

Dans mon exemple "simple", j'avais un javascript associé de ce style :

Code Javascript :

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
<script type="text/javascript">
var oEditor	= window.parent.InnerDialogLoaded() ;
var FCK		= oEditor.FCK ;
// Gets the document DOM
var oDOM = oEditor.FCK.EditorDocument ;
var oInsert_Biblio ;
 
window.onload = function()
{
	// First of all, translate the dialog box texts
	oEditor.FCKLanguageManager.TranslatePage(document) ;
	window.parent.SetOkButton( true ) ;
}
 
function Ok()
{
	if ( GetE('txt').value.length == 0)
	{
		alert( "Les champs doivent &ecirc;tre remplis" ) ;
		return false ;
	}
 
	oEditor.FCKUndo.SaveUndoStep() ;
 
	oInsert_Biblio		= FCK.EditorDocument.createElement( 'DIV' ) ;
	oInsert_Biblio.innerHTML ="Voila la valeur de mon input : " + GetE('txtId').value;
	FCK.InsertElement( oInsert_Biblio ) ;
	return true ;
}
		</script>

Je n'ai rien pour tester ce que j'ai écrit, j'espère que ça pourra t'aiguiller au moins un peu

.

**anobiste** · 18/09/2009, 14h52

mlny84: merci pour ton aide.

Ajouter un plugin pour le FCKEditor

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager