BOF Editor est un plugin jQuery qui permet d'éditer des champs de texte long dans un espace quasiment plein écran, avec une option de prévisualisation du texte ainsi qu'une barre de raccourcis de syntaxe wiki.
Il est donc orienté pour des textes sous formats Wiki et non comme les ''rich editor'' qui permettent de rédiger du html.
Il possède plusieurs options, dont la possibilité de s'ouvrir soit lors d'un clic sur un champs de texte (focus), soit sur le clic d'un lien (button).
Le code de ce projet est sous double licence :
Notez que toute les options du BOF Editor sont facultatives et toutes cumulables.
Il vous suffit d'insérer l'API du BOF Editor ainsi que son CSS et de l'instancier sur le textarea visé :
<link rel="Stylesheet" title="Normal" media="screen" type="text/css" href="bof_editor/ui.css"/> <script type="text/javascript" src="bof_editor/api.js"></script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#id_text').BOF_Editor();
});
//]]>
</script>
En plus du code de base, il vous faut insérer l'API et CSS de la Wikibar :
<link rel="Stylesheet" title="Normal" media="screen" type="text/css" href="wikibar/ui.css"/> <script type="text/javascript" src="wikibar/api.js"></script>
Et changer l'instanciation du BOF Editor pour lui activer l'option de la wikibar :
<script language="JavaScript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#id_text').BOF_Editor(
'with_wikibar': true
);
});
//]]>
</script>
Il suffit de suivre le même procédé que pour le mode avec Wikibar, mais il faut encore changer l'instanciation pour indiquer l'url ou envoyer le texte et recevoir une prévisualisation :
<script language="JavaScript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#id_text').BOF_Editor(
'url_preview': "/syntax/preview/",
'with_wikibar': true
);
});
//]]>
</script>
Le fait d'indiquer une url de prévisualisation active son mode, vous pouvez mettre l'url que vous souhaitez. Elle devra accepter les requêtes du type POST, le texte sera placé dans un attribut source et renvoyé formaté dans une réponse contenant uniquement le html.
Par défaut, l'éditeur est en mode "focus", c'est à dire qu'il s'ouvre dès le clic dans le champs de texte. Il est possible d'utiliser le mode "bouton" qui ajouter un lien juste en dessous le champs texte et le clic sur ce lien ouvrira l'éditeur.
Il suffit d'indiquer le mode dans les options :
<script language="JavaScript" type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#id_text').BOF_Editor(
'mode': 'button',
'i18n_opener_button': "Ouvrir l'éditeur"
);
});
//]]>
</script>
Notez aussi l'option "i18n_opener_button", facultative, qui permet de changer le titre du lien affiché.
BOF Editor est téléchargeable uniquement depuis son dépôt Subversion
http://svn.logicielslibres.info/bordel/sveetch/bof_editor/
Notez qu'il comporte déja une copie de la Wikibar, ce n'est donc pas la peine de la télécharger à part si vous comptiez l'utiliser.
Tout les textes par défaut sont en français, si vous souhaitez les changer ou
utiliser l'éditeur dans d'autres langues, vous pouvez les modifier par les
options. Tout les textes modifiables ont un nom d'option commencant par
i18n_.
Cliquez à l'intérieur du champs de texte pour ouvrir l'éditeur.