![]() |
![]() |
|
![]() |
![]() |
|
Envoyer à un ami
JE ne vais vous décrire que la façon dont j'ai intégré ces deux outils à Spip et vous laisserai donc le soin d'étudier par vous même leur fonctionnement propre si vous souhaitez approfondir vos connaissances sur ces produits.
Htmlarea est un produit développé par INTERACTIVETOOLS mais est gratuit (sous licence type BSD ?).
Vous trouverez la dernière version à cette adresse http://www.interactivetools.com/.
Pour ma part j'ai téléchargé la version 3.0 bêta qui supporte également Mozilla, j'ai ensuite travaillé sur la version CVS.
Installation de HTMLArea sous Spip
Une fois téléchargé, décompressez le fichier dans la RACINE de votre site, un répertoire HTMLArea sera créé avec tous les fichiers d'exemples et de test.
Il vous faut créer un fichier htmlarea.html que vous incluerez dans vos fichiers Spip, ceci pour améliorer la lisibilité tout simplement !
Voici le fichier htmlarea.html :
| <style type="text/css"> @import url(/htmlarea/htmlarea.css) </style> < !-- load the main HTMLArea files --> <script type="text/javascript" >_editor_url = "/htmlarea/" ;_editor_lang = "fr" ;</script> <script type="text/javascript" src="/htmlarea/htmlarea.js"></script> <script type="text/javascript" src="/htmlarea/lang/fr.js"></script> <script type="text/javascript" src="/htmlarea/dialog.js"></script> < !-- <script type="text/javascript" src="/htmlarea/popupdiv.js"></script> --> <script type="text/javascript" src="/htmlarea/popupwin.js"></script> < !-- load the plugins --> <script type="text/javascript"> // WARNING : using this interface to load plugin // will _NOT_ work if plugins do not have the language // loaded by HTMLArea. // In other words, this function generates SCRIPT tags // that load the plugin and the language file, based on the // global variable HTMLArea.I18N.lang (defined in the lang file, // in our case "lang/en.js" loaded above). // If this lang file is not found the plugin will fail to // load correctly and nothing will work. HTMLArea.loadPlugin("TableOperations") ; // HTMLArea.loadPlugin("SpellChecker") ; // HTMLArea.loadPlugin("FullPage") ; // HTMLArea.loadPlugin("CSS") ; // HTMLArea.loadPlugin("ContextMenu") ; </script> <script type="text/javascript"> var editor = null ; function initEditor() // create an editor for the "ta" textbox editor = new HTMLArea("texte_area") ; // register the FullPage plugin // editor.registerPlugin(FullPage) ; // register the Table Operations plugin editor.registerPlugin(TableOperations) ; // register the SpellChecker plugin // editor.registerPlugin(SpellChecker) ; // register the CSS plugin // editor.registerPlugin(CSS, // combos : [ // label : "Syntax :", // menu text // CSS class // options : "None" : "", // "Code" : "code", // "String" : "string", // "Comment" : "comment", // "Variable name" : "variable-name", // "Type" : "type", // "Reference" : "reference", // "Preprocessor" : "preprocessor", // "Keyword" : "keyword", // "Function name" : "function-name", // "Html tag" : "html-tag", // "Html italic" : "html-helper-italic", // "Warning" : "warning", // "Html bold" : "html-helper-bold" // , // context : "pre" // , // label : "Info :", // options : "None" : "", // "Quote" : "quote", // "Highlight" : "highlight", // "Deprecated" : "deprecated" // // // ] // ) ; // add a contextual menu // editor.registerPlugin("ContextMenu") ; // load the stylesheet used by our CSS plugin configuration // editor.config.pageStyle = "@import url(htmlarea/custom.css) ;" ; setTimeout(function() editor.generate() ; , 50) ; return false ; function insertHTML() var html = prompt("Entrez du code HTML ici") ; if (html) editor.insertHTML(html) ; function highlight() editor.surroundHTML('<span style="background-color : yellow">', '</span>') ; window.onload = initEditor ; </script> |
Il s'agit des différents fichiers javascript dont a besoin HTMLArea pour fontionner. Vous y déclarez également le chemin _editor_url ainsi que la langue _editor_lang = "fr", complétée par <script type="text/javascript" src="/htmlarea/lang/fr.js">.
Il faut mettre ce fichier à la racine du site.
Vous remarquerez que vous pouvez personaliser le style au travers de la feuille de style @import url(/htmlarea/htmlarea.css).
Bonjour,
Merci pour cet article. Je souhaite installer HTMLarea avec Internet Explorer et Mozilla.
Avec IE, j'ai une erreur Javascript inconnue, cela ne semble pas empecher le fonctionement mais c'est tout de même génant.
Avec Firefox, j'ai le cadre du formulaire qui s'agrandit et glisse vers la gauche : j'ai réussi à résoudre le problème en remplaçant tous les 40 (nombre de colonnes et width) par 60 dans le fichier article_edit.php de SPIP. Je ne pense pas que ce soit une trés bonne solution, il faudrait pouvoir agrandir directement le cadre formulaire de l'article.
Avec Mozilla aucun problème.
Si vous pouvez m'aider à résoudre ces problèmes. Merci.
Christophe.
J'ai le meme probleme que toi sous mozilla : le cadre s'aggrandit a gauche....
jusque la, je n'arrive pas a resoudre le probleme...
Pour le probleme du cadre qui s'agrandit avec Mozilla, j'ai désactivé les boutons qui ne m'interessaient pas :
dans le fichier htmlarea.html
editor = new HTMLArea("texte_area") ;
editor.config.hideSomeButtons(" subscript superscript showhelp popupeditor htmlmode strikethrough about ") ;
et j'ai remplacé tous les 40 (colonnes et width) du fichier article_edit.php par le chiffre 60. Je n'ai plus de glissement.
Pour mon probleme avec IE lorsque je déplace le Textarea HTMLarea hors du formulaire (juste aprés la balise /FORM) je n'ai plus l'erreur d'execution javascript. Quelqu'un a t-il une idée d'ou l'erreur pourrait-elle venir ?
Christophe
Fckeditor V2 etant disponible, et etant compatible avec Mozilla, il n'est plus necessaire de l'utiliser avec htmlarea.
Mais il demeure un probleme : l'organisation des fichiers a completement changé sur la nouvelle version !
Plus de fichier Php a integrer...
N'y connaissant rien, quelqu'un aurait il tenté l'experience avec succes ?
Bonjour, j'ai remarqué une petite erreur au niveau de du fichier htmlarea.html decrit ci dessus il faut ajouter les "" et "" à la fonction "setTimeout(function()..." ce qui donne pour la fin du fichier htmlarea.html
setTimeout(function() editor.generate() ; , 50) ; return false ;
function insertHTML() var html = prompt("Entrez du code HTML ici") ; if (html) editor.insertHTML(html) ;
function highlight() editor.surroundHTML('', '') ;
window.onload = initEditor ;
Bonjour !
Je m'interroge sur FckEditor sous SPIP... Quelle version uttilises-tu ? J'utilise la 1.4 et certaines personnes ne voient pas la brique WYSIWYG... N'as tu jamais rencontré ce problème ? Si oui, dans quel cas ? Y a-t-il une raison particulière ? ? Apparemment, le poste est sous Windows et ces personnes utilisent IE. J'ai du mal à voir où pourrait être le problème...
Je remercie d'avance toute personne qui pourra m'aider ! ;)
++
Bonjour,
J'ai tenté d'installer htmlarea, et ça ne marche désesperement pas. J'ai pris tous vos fichiers et la version de htmlarea que vous préconisez ; la barre des raccourcis typo n'apparait plus, apparemment, il trouve bien htmlarea, en tout cas, il n'y a pas de message d'erreur qui s'affiche. J'ai essayer d'ôter votre fichier article_edit, de remettre l'ancien en le modifiant comme précisé, pareil. J'ai tenté de changer la version d'htmlarea, de prendre la dernière, pareil. A noter que c'est en local sous linux. J'ai quand même été sur votre site de test pour vérifier que ça ne vienne pas de mon navigateur, là ça marche.
Auriez-vous une idée, là, je coince.
Merci
Michel
PS : j'ai bien changé les liens .php en .php3
Bonjour,
Je voudrais bien changer la version FCKeditor 1.4 en 1.6, j'ai fait les modifs comme modifier le fichier le upload.php, brower.php et fceditor.php pour mettre l'endroit ou on peut mettre fichier, mais le upload ne marche pas en pendant et pourtant j'ai essayer de faire les même modif que ton version FCKeditor. :–(
Peut-être j'ai oublié de modifier un fichier ! ! ! ! ! !
Bonsoir à tous,
J'ai bien lu le tutorial qui est très bien expliqué ! Cependant, j'ai une question à vous demander qui vous paraitra sans doute ridicule : Comment fait on pour installer FCKeditor sur mon forum ? à savoir que mon site n'est pas un SPIP. En fait, je voudrai qu l'internaute puisse ajouter des smilles, mettre le texte en gras ou en italique....dans leurs messages... Veuiller m'aider s'il vous plaît ! Merci infiniment Hoang
Trop merci pour ce WYSIWYG sous SPIP ! ! ! ! En plus les explications sont claires. Il a juste fallu que je modifie les *.php par des *.php3
ça marche tres bien !
Bonjour,
Avez-vous téléchargé mes fichiers ? ? Si vous l'avez fait, il vous suffit de suivre à la lettre les indications que j'ai donné dans le texte.
Par contre, c'est vrai qu'il y a un piège puisque les fichiers que j'utilise en fait sont : fckeditor2.html, et fckeditor2.php ! (fichiers contenus dans le zip)
Les fichiers fckeditor.html et fckeditor.php sont les fichiers d'origine (de sauvegarde). Donc, si vous souhaitez utiliser ces noms là, il vous faut renommer les fichiers avec le 2 ! ! ! :–/ Désolé de la confusion...
J'espère qu'ainsi vous arriverez à installer FCKeditor chez vous.
Vous dites : « Je parviens à ouvrir la fenêtre de saisie de texte KFC, mais pas la barre. »
Je ne vous comprends pas très bien car pour moi ça marche très bien, je vois le cadre de saisie ainsi que la barre ! ! Attention FCKeditor ne fonctionne que sous IE, aussi si votre navigateur n'est pas IE vous verrez en fait la barre HTMLarea !
Tenez moi au courant ! !
@+
Txia
Merci pour ces précisions, j'ai maintenant un souci avec htmlarea, j'ai sous mozilla une erreur du type :
< !-- load the main HTMLArea files --> < !-- load the plugins -->
J'ai suivi la procédure, c-à-dire, pris votre fichier htmlarea.html, l'ai mis à la racine de spip, j'ai aussi mis votre fichier article_edit.php dans ecrire. De plus, je crois que mes chemins relatifs sont bons.
Si vous comprenez le message ci- dessus, je suis preneuse.
Merci,
Lili
Bonjour,
Je suppose également que vous avez mis le répertoire htmlarea sur la racine... (je vous conseille de dézipper le fichier htmlarea.zip que j'ai mis à disposition car j'y ai apporté des modifs par rapport aux fichiers originaux).
Cette précision étant faite, la plupart du temps ce type d'erreur est liée au chemin. essayez ./ ou sans rien.
exemple :
<script type="text/javascript" >_editor_url = "./htmlarea/" ;_editor_lang = "fr" ;</script>
<script type="text/javascript" src="./htmlarea/htmlarea.js"></script>
ou :
<script type="text/javascript" >_editor_url = "htmlarea/" ;_editor_lang = "fr" ;</script>
<script type="text/javascript" src="htmlarea/htmlarea.js"></script>
Mettez moi un lien chez vous, ça me permettra de voir ce qui se passe :–/
Tenez-moi au courant !
@+
Txia B–)
j'ai une erreur
Warning : include_ecrire(htmlarea.html) : failed to open stream : No such file or directory in /home/plastocr/www/ecrire/inc_version.php3 on line 354
Warning : include_ecrire() : Failed opening 'htmlarea.html' for inclusion (include_path='. :/usr/local/lib/php') in /home/plastocr/www/ecrire/inc_version.php3 on line 354
avoir avoir suivi l'installation de htmlarea a la trace...avec inclusion dans le fichier article_edit.php3
include_ecrire ("htmlarea.html") ;
qu'est ce qui va pas ?
merci 
j'y suis arrivé finalement...
mais merci quand meme pour ce tuto !
Quoi qu'il en soit, il demeure un probleme : chaque fois qu'on clique dedans (qu'on ecrive ou non) la barre s'aggrandit...Et du coup, petit a petit, la page s'elargie !
Qu'est ce qui se passe dr ?