Ajouter un plugin pour le FCKEditor

Version imprimable

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:

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.

16/09/2009, 09h56
mlny84

Bonjour,

Si tu regardes ta fonction suivante :

Code:

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.
16/09/2009, 15h01
anobiste

y a pas de plus simple?

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

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:

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:

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:

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 ê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 :).

18/09/2009, 14h52
anobiste

Nice Job !

mlny84: merci pour ton aide.