Edition en ligne avec TinyMCE

En utilisant TinyMCE, vous pouvez créer directement des pages Web sur votre site en vous connectant sur n'importe quel ordinateur. Créer des pages statiques utilisant un template, un modèle réutilisable dans lequel s'insère le contenu de l'article que vous rédigez.

Il est même assez simple de choisir un template dans une liste pour chaque article, ou d'en changer pour un article déjà publié, une possibilité ignorée par la plupart des CMS, pourtant utile pour un design contextuel.

On a choisi un des éditeurs en ligne le plus populaire, TinyMCE. Il est écrit en JavaScript et fonctionne sur un navigateur. Il peut s'intégrer à un CMS, et il est l'éditeur par défaut de Wordpress. On va l'associer a des scripts conçus pour intégrer de nouvelles pages sur le site. Idéalement des news.

Bien que cet article soit avant tout pédagogique, il est accompagné d'une démonstration suffisamment complète pour être fonctionnelle et utilisable sur votre site. Par la suite on va développer un produit plus professionnel... mais tout aussi gratuit.

Cette démonstration comporte d'emblée un outil pour créer des URL composées de mots-clés, afin d'optimiser le site pour les moteurs de recherche, alors que certains CMS très répandus, comme Joomla par exemple, ne peuvent le faire qu'avec un plugin!

Comment cela fonctionne

Le système pour la création de pages se compose des fichiers suivants:

Les principes

TinyMCE fonctionne en associant des fonctions d'édition à un objet de formulaire, un textarea. D'autres objets de formulaires sont ajoutés dans cette démo, pour le titre, le choix du template.

Le template est une page HTML ou PHP qui contient des marqueurs pour l'insertion du titre et du texte:

Pour le titre, une variable PHP:

<?php title="montitre"; ?> 

Pour le contenu, un calque:

<div id="content">  
</div>

Il vous sera facile de créer un nouveau template à partir du modèle proposé.

Lorsque l'utilisateur clique sur le bouton "Enregistrer", les valeurs ou contenus des objets de formulaire sont passés au script store.php par le script Ajax. Le script PHP effectue les opérations suivantes:

  1. Il appelle le script titleconvert.php pour créer une URL.
  2. Il charge le template dont le nom lui a été donné, le recopie sous le nom de fichier généré par titleconvert, nom qui est une séquence de mots-clés sans accents ni majuscules.
  3. Il insère le titre et le texte de l'article à leur place.
  4. L'article est alors publié et doit être lié à la page d'accueil.

Editer un article déjà publié

Les mêmes puissantes expressions rationnelles sont utilisées pour reprendre l'information dans une page déjà publiée, que pour stocker les données dans une nouvelle page formée d'une copie du template.

L'avantage de ce système est que notre éditeur en ligne n'a pas besoin de stocker les textes, ni dans une base de données, ni dans des fichiers XML, ils sont stockés directement dans les pages et repris dans les pages pour être édités.

Développements futurs

Pour que l'on puisse utiliser cet outil en production, il doit être développé et disposer au moins d'une liste des articles publiés afin de les éditer plus facilement. Il faut aussi lier automatiquement les articles sur la page d'accueil du site.
Un logiciel comme Wordpress ne lie que les derniers articles sur la page d'accueil. Une telle solution est facile à implémenter.

En outre de nombreux outils peuvent lui être ajoutés: un générateur de flux RSS, de sitemap, etc... Ce sera l'objet d'une publication ultérieure.

Il est également envisageable de connecter l'éditeur avec une base de données, non pas pour le contenu des articles, mais pour les informations associées telles que catégories, tags, etc... ce pourra être l'objet aussi d'une autre démonstration.

Utilisation de la démonstration

  1. Extraire le contenu de l'archive et le mettre en ligne sur votre site.
  2. Lancer install.php pour créer un login et un mot de passe.
  3. Il sera ensuite automatiquement effacé. Pour l'utiliser ultérieurement, il faudra télécharger ce fichier à nouveau.
  4. Lancer editor.php
  5. Entrer un titre et un contenu, choisir un template (dans la démo ils sont tous identiques).
  6. Ajouter un lien sur l'article sur votre page d'accueil.

Télécharger les scripts

L'archive contient une distribution TinyMCE, les scripts PHP et les exemples de templates.

Forum

Question sur l'installation de l'éditeur tiny MCE

06-07-2011 22:48:23

claude

Bonsoir je suis particulièrement intéressé par le script du tuto paru sur le site pour mon association j'ai crée un script envoi d'émail et de mailing aux adhérents avec tiny comme éditeur mais je n'ai trouvé nul part sur le web un tuto ou un script pour charger un modèle de page ou reprendre un modèle pour le modifier il me semble que votre script répond à toutes mes attentes mais impossible de faire des essais je n'ai que des tas de messages d'erreurs qui me semble dû à la partie login exemple: ( ! ) Notice: Undefined index: login in C:\Wamp\www\SOLMCE\editor.php on line 9 Call Stack # Time Memory Function Location 1 0.0006 693272 {main}( ) ..\editor.php:0 ( ! ) Notice: Undefined index: password in C:\Wamp\www\SOLMCE\editor.php on line 10 Call Stack # Time Memory Function Location 1 0.0006 693272 {main}( ) ..\editor.php:0 ( ! ) Deprecated: Function session_register() is deprecated in C:\Wamp\www\PJ TinyMCE\original script\authorize.php on line 47 Call Stack # Time Memory Function Location 1 0.0004 692720 {main}( ) ..\editor.php:0 2 0.0011 724608 authorize( ) ..\editor.php:19 Merci de bien vouloir me renseigner Bonne soirée Claude
07-07-2011 08:41:42

webmaster

Bonjour Est-ce que vous avez lancé le script install.php pour créer un compte? Cela permet d'éviter que toute personne puisse éditer sur votre site...
07-07-2011 08:58:44

claude

Bonjour oui bien sur je suis passé par install j'ai rechargé plusieurs fois le script dans des répertoires différents et fait l'install c'est le même problème, question idiote, pourquoi avoir prévu un système de protection aussi important pour un tuto d'initiation ?? vous dites vous même que ce n'est pas un outil de production. je voudrais aboutir car c'est vraiment ce qui me manque pour mon application Merci de votre réponse Bonne journée
07-07-2011 18:00:13

webmaster

Apparemment ce qui pose problème:
$ulogin= $_SESSION["login"];
$upass= $_SESSION["password"];
Donc la variable $_SESSION n'est pas initialisée et la session n'est pas ouverte ce que l'on peut vérifier par un dump de $_SESSION. Est-ce que votre configuration supporte les sessions? Intégrer une protection est nécessaire car une partie des utilisateurs risque d'utiliser le logiciel tel quel.
08-07-2011 08:25:40

claude

Bonjour, désolé pour le dérangement, je viens de mettre le script directement sur mon hébergement et l'installation est sans problème c'est bien mon wamp local qui est en cause. Bonne journée et merci encore de votre intervention Claude

Affichage de la couleur du texte

26-01-2011 14:29:40

webmaster

Bonjour Je n'ai pas pu reproduire le problème. Les transformations du texte sont faites par l'éditeur TinyMCE, le script se contente de faire des appels à l'API de l'éditeur. Eventuellement la fonction file_put_contents() dans le fichier store.php peut aussi modifier le texte.
$n = file_put_contents($filename, $body);
Vous pourriez ajouter un paramètre pour forcer le mode binaire...
$n = file_put_contents($filename, $body, FILE_BINARY );
De même la fonction de chargement dans retrieve.php peut être modifiée:
$content = @file_get_contents($page, FILE_BINARY);
Je ne peux pas le tester puisque pour moi, le contenu est fidèlement restitué.
26-01-2011 12:44:28

Nico

Bonjour, Tout d'abord merci pour le script. Cependant je rencontre un problème: Après édition d'un texte en couleur et son enregistrement. La couleur du texte s'affiche par défaut en noir quand j'ouvre le fichier .php dans mon navigateur. J'ai remarqué qu'il y avait des / mis dans le code. Si je les supprimes la couleur réapparait. Ex: <p><span style="color: #ff0000;">test en rouge</span><span style=\"color: #000080;\">test en bleu</span></p> ----->le rouge apparait, il n'y a pas les / mais pas le bleu. Avez vous une solution, j'ai cherché, mais rien à faire...... Merci!
26-01-2011 15:31:56

Nico

Bonjour, Merci de votre réponse! Mais malheureusement, ça ne fonctionne pas.... Je comprends pas.
26-01-2011 16:01:32

webmaster

Vous pouvez essayer de modifier la configuration de TinyMCE. Supprimer pour voir urldecode dans store.php:
$content = urldecode($a["content"]);
devient:
$content = $a["content"];
Il faut aussi savoir si le texte est déjà modifié dans le fichier sauvegardé ou s'il l'est lors du rechargement. Pour cela il faut regarder le contenu du fichier avec un éditeur.
26-01-2011 17:07:13

Nico

En fait la modification se fait dès la sauvegarde. J'ai voulu mettre une fonction pour retirer les slash, mais je sias pas trop où je dois la situer réellement.
26-01-2011 17:37:42

Nico

Pour info, j'avais aussi installer votre script d'édition en ligne CKEditor, et même soucis. Je les ai testés séparément en les téléchargeant et ils fonctionnent correctement.
26-01-2011 18:52:14

webmaster

Les modifications se font dans store.php sur la variable $content avant cette ligne:
$body = $head.'<div id="content">'.$content.'</div>'.$parts[1];
Dans le cas présent, il vaudrait mieux utiliser la fonction stripcslashes après rechargement par retrieve.php
$content = @file_get_contents($page);
$content = stripslashes($content);
26-01-2011 21:06:24

Nico

Bon, j'ai bien rajouter : $content = stripslashes($content); après $content = @file_get_contents($page); dans retrieve.php, mais ça ne veut vraiment pas! Merci en tout cas pour vos réponses et votre rapidité!
26-01-2011 21:20:28

Nico

Ah si! Je n'avais pas tester, il y a du mieux! Quand j'édite ma page tout juste sauvée avec l'éditeur tinymce.La couleur du texte apparait bien. avec le code:<p><span style="color: #ff0000;">Test couleur<br /></span></p> Mais si j'affiche la page créée dans le navigateur, la couleur disparait... Le code devient: <span #ff0000;\="" style="">Test couleur<br/></span> (il manque le style color!)
27-01-2011 09:39:32

webmaster

Pourriez vous me dire quelle est la version de PHP? Je reçois plusieurs demandes pour le même problème depuis quelques jours, alors que le script fonctionne bien pour moi, aussi je soupçonne une modification des fonctions PHP.
27-01-2011 10:04:56

Nico

Bonjour, Alors la version PHP est: PHP Version 5.2.6-1+lenny9
27-01-2011 17:33:04

webmaster

Après quelques essais sur différents hébergeurs, je fais ceci: Remplacer dans store.php :
$n = file_put_contents($filename, $body);
par :
$nfile = fopen($filename, 'w'); 
$n = fwrite($nfile, stripslashes($body)); 
fclose($nfile);
Je vais mettre en ligne une nouvelle version.
27-01-2011 18:39:20

Nico

Et bien C'EST PARFAIT! CA MARCHE! Merci beaucoup! Nico.