markItUp! Part III, Intégration d'un parser personnalisé pour la prévisualisation
Posé ici le lundi 22 juin 2009 à 07:33 par
Voilà maintenant un an que je promettais un tutoriel sur l'implémentation d'un parser personnalisé dans markItUp! et jusqu'à aujourd'hui, toujours rien. A vrai dire j'avais totalement oublié. Cette intégration de parser semble être plus problématique que je le pensais pour la les développeurs m'ayant contactés.
Voici enfin un article pour réparer tout ça. C'est simple.
Le Set markItUp!
Prenons l'exemple d'un set simple orienté Textile.
Set.js de base
myTextileSettings = {
nameSpace: "textile",
onShiftEnter: { keepDefault:false, replaceWith:'\n\n' },
markupSet: [
{name:'Bold', closeWith:'*', openWith:'*'},
{name:'Italic', closeWith:'_', openWith:'_'},
{name:'Stroke through', closeWith:'-', openWith:'-'},
{name:'Preview', call:'preview', className:'preview'}
]
}
Si la prévisualisation est appelée en l'état, le contenu sera affiché en HTML, donc sans aucune mise en forme Textile. C'est ici qu'un parser est nécessaire. Comme le précise la documentation un attribut previewParserPath peut être ajouté au set pour diriger le contenu de l'éditeur vers un script particulier plutôt que vers la simple sortie HTML.
Set.js avec configuration parser
myTextileSettings = {
nameSpace: "textile",
previewParserPath: "~/sets/textile/preview.php",
onShiftEnter: { keepDefault:false, replaceWith:'\n\n' },
markupSet: [
{name:'Bold', closeWith:'*', openWith:'*'},
{name:'Italic', closeWith:'_', openWith:'_'},
{name:'Stroke through', closeWith:'-', openWith:'-'},
{name:'Preview', call:'preview', className:'preview'}
]
}
Le contenu de l'éditeur sera maintenant posté au script PHP précisé. Ici, un script preview.php qui se trouve dans le même dossier que set.js. Vous l'aurez remarqué, ~/ est un raccourcis utile qui désigne le dossier markItUp! sur votre site. Le script peut se trouver et se nommer comme vous le souhaitez.
Par défaut, le nom de la variable postée est data, mais peut elle aussi être nommée différemment grâce à l'attribut previewParserVar.
myTextileSettings = {
nameSpace: "textile",
previewParserPath: "~/sets/textile/preview.php",
previewParserVar: "myVariable",
onShiftEnter: { keepDefault:false, replaceWith:'\n\n' },
// ...
Pour ce tutoriel, ne changeons rien, data ira très bien.
La prévisualisation et le parser
Créons maintenant notre fichier preview.php. Ce fichier se contentera d'inclure le parser voulu, ici le parser Textile préalablement téléchargé sur le site officiel et posé au même niveau que set.js. On y passe ensuite le contenu posté de l'éditeur afin qu'il soit interprété et affiché.
Preview.php de base
<?php
include "classTextile.php";
$textile = new Textile;
echo $textile->TextileThis( stripslashes( $_POST["data"] ) );
?>
C'est quasiment tout. J'avais prévenu : c'est simple.
La prévisualisation et la feuille de styles
Pour rendre le tout plus propre et valide, il est recommandé d'insérer le HTML adéquat avant et après le script PHP. Pour un rendu optimale, ajoutez la feuille de style de votre site et pourquoi pas divers autres éléments HTML de mise en page. Le résultat sera total.
Preview.php étendu
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preview markItUp!</title>
<link href="../markitup/templates/preview.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include "classTextile.php";
$textile = new Textile;
echo $textile->TextileThis( stripslashes( $_POST["data"] ) );
?>
</body>
</html>
Conclusion
Vous l'aurez compris, la démarche est la même pour tout langage de markup (autre que le HTML) et parsers. Découvrez l'exemple Textile ci-dessus, ainsi que d'autres exemples tels que markdown ou bbcode en action dans la rubrique exemples du site markItUp!.
Les liens
Parser Textile pour PHP
http://textile.thresholdstate.com/
MarkItUp!
http://markitup.jaysalvat.com/
Ce contenu est mis à disposition selon les termes de la licence Creative Commons 2.0 France : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.
Context
Thématiques :
Trackbacks
0 trackback
Commentaires
2 commentaires
Très beau travail, je vais tester de suite ce script.
Bonne continuation
1. Par Djb le dimanche 30 août 2009 à 21:35
Très beau travail, je vais tester de suite ce script.
Bonne continuation
2. Par Djb le dimanche 30 août 2009 à 21:35