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:

• TinyMCE, la dernière version de la distribution standard.
• L'éditeur, qui est une page HTML intégrant TinyMCE et divers champs de formulaire ajoutés.
• store.php, un script PHP qui crée les pages HTML.
• retrieve.php, un script qui reprend l'information dans les pages HTML pour l'éditer.
• anaa.js, un mini-framework Ajax, grâce auquel il est possible de continuer à éditer l'article après sa sauvegarde.
• titleconvert.php, un script pour fabriquer une URL à partir du titre de l'article.
• Et quelques exemples de templates.

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.

• Archive. Mise à jour le 27 janvier 2011.
• TinyMCE, pour être sûr d'avoir la dernière version. Mais pour le remplacer, il faudra modifier la page de l'éditeur HTML.

$ulogin= $_SESSION["login"];
$upass= $_SESSION["password"];

$n = file_put_contents($filename, $body);

$n = file_put_contents($filename, $body, FILE_BINARY );

$content = @file_get_contents($page, FILE_BINARY);

$content = urldecode($a["content"]);

$content = $a["content"];

$body = $head.'<div id="content">'.$content.'</div>'.$parts[1];

$content = @file_get_contents($page);
$content = stripslashes($content);

$n = file_put_contents($filename, $body);

$nfile = fopen($filename, 'w'); 
$n = fwrite($nfile, stripslashes($body)); 
fclose($nfile);