Les éditeurs du CMS Icybee

Différents éditeurs sont utilisés pour saisir les contenus du CMS Icybee. Qu'il s'agisse du corps des articles ou de leur accroche, de la description des fichiers, des contenus plus ou moins complexe des pages… de la chaine de caractères la plus simple aux différents éléments d'un schéma en passant par du texte riche, ses éditeurs permettent de saisir des types variés de contenu.

Dés l'installation du CMS, on pourra saisir des chaînes de caractères, du texte brut, utiliser la syntaxe Markdown, mettre en forme ses contenus grâce à du texte riche… De plus, il est souvent possible de choisir l'éditeur à utiliser pour rédiger son contenu. Par exemple, on préférera utiliser un éditeur Markdown pour rédiger un article contenant beaucoup de code, alors qu'un éditeur RTE sera parfait pour un article décoré d'images.

Les éditeurs ne sont pas seulement utilisés pour rédiger du texte, mais aussi pour choisir des images, des enregistrements, des formulaires, la vue à afficher dans le corps d'une page et bien d'autres choses encore.

Description d'un éditeur

L'API fournie par le module Editor (editor) définie l'interface commune à tous les éditeurs. Ils doivent être capables de sérialiser/désérialiser/rendre le type de contenu qu'ils supportent, et de créer l'élément d'interface permettant de le saisir.

Par exemple, la classe TextEditor permet de créer l'instance de l'éditeur text. Les méthodes serialize(), unserialize(), render() et from() permettent respectivement de sérialiser du contenu, de désérialiser du contenu sérialisé, de faire un rendu d'un contenu désérialisé et enfin de crée l'élément d'interface permettant d'éditer du contenu.

<?php

namespace ICanBoogie\Modules\Editor;

class TextEditor implements Editor
{
    public function serialize($content)
    {
        return $content;
    }

    public function unserialize($serialized_content)
    {
        return $serialized_content;
    }

    public function render($content)
    {
        return $content;
    }

    public function from(array $attributes)
    {
        return new TextEditorElement($attributes);
    }
}

Parce que le contenu supporté par cet éditeur est basique, les méthodes de (dé)sérialisation et de rendu sont très simples, elles ne font que retourner la valeur passée. Des éditeurs supportant des contenus plus complexes, comme des tableaux de valeurs, pourraient utiliser la notation JSON pour stocker leurs données.

Sérialisation et désarialisation

La méthode serialize() est utilisée pour transformer le contenu supporté par un éditeur en chaine de caractères pouvant être facilement stockée en base de données :

<?php

$content = "Madonna!";
$editor = $core->editor['text'];
$serialized_content = $editor->serialize($content);

// on peut enregistrer le contenu sérialisé en base de données

Les éditeurs ne travaillent qu'avec des contenus non sérialisées, c'est à dire que si l'on souhaite faire le rendu d'un contenu ou obtenir un élément d'interface permettant de le modifier et que le contenu est sérialisé il conviendra de le désérialiser avant de pouvoir l'utiliser :

<?php

// on a récupéré $serialized_content depuis la base de données.

$editor = $core->editor['text'];
$content = $editor->unserialize($serialized_content);
$rendered_content = $editor->render($content);

Rendu de contenu

La méthode render() permet le rendu des contenus supportés par l'éditeur. La fonction retourne une chaine de caractères ou un objet qui peut être transformé en chaine de caractères. Par exemple, la méthode render() de l'éditeur Image reçoit l'identifiant de l'image à utiliser et retourne l'enregistrement actif correspondant qui génère un élément IMG lorsqu'il est transformé en chaine de caractères.

Ainsi, si l'on demande à l'éditeur Image de faire le rendu de son contenu on obtient un objet, si l'on ne fait pas de traitement il finira en chaine de caractères, mais l'on peut très bien utiliser cet objet pour obtenir une miniature ou simplement l'URL de l'image :

<?php

$editor = $core->editor['image'];
$image = $editor->render('12');

if ($image)
{
    echo $image->thumbnail('article-view');
}

Élément d'interface

Chaque éditeur fourni un élément d'interface permettant de saisir le contenu qu'il supporte, la méthode from() permet de l'obtenir. Par exemple, la classe TextEditor fournit l'élément TextEditorElement :

<?php

namespace ICanBoogie\Modules\Editor;

class TextEditor implements Editor
{
    ...

    public function from(array $attributes)
    {
        return new TextEditorElement($attributes);
    }
}
<?php

namespace ICanBoogie\Modules\Editor;

class TextEditorElement extends \Brickrouge\Text implements EditorElement
{
    public function __construct(array $attributes=array())
    {
        parent::__construct
        (
            $attributes + array
            (
                'class' => 'editor raw'
            )
        );
    }
}

Les éléments doivent être des instances de Element ou d'une de ses sous-classes. Par exemple, TextEditorElement est une sous-classe de Text qui est une sous-classe de Element. On peut donc utiliser les nombreux attributs de la classe Element afin d'obtenir l'élément qui nous convient le mieux :

<?php

use Brickrouge\Element;
use Brickrouge\Form;

$editor = $core->editors['text'];
$element = $editor->from
(
    array
    (
        Form::LABEL => 'Title',
        Element::REQUIRED => true,
        
        'name' => 'title',
        'value' => $editor->unserialize($serialized_content)
    )
);

On notera que le contenu est passé à l'élément en utilisant l'attribut value.

Définition des éditeurs

Les éditeurs sont définis grâce au système de configuration du framework ICanBoogie. On utilise la configuration editors pour les déclarer. Voici celle du module Editor, qui en définit de nombreux :

<?php

namespace ICanBoogie\Modules\Editor;

return array
(
    'rte' => __NAMESPACE__ . '\RTEEditor',
    'textmark' => __NAMESPACE__ . '\TextmarkEditor',
    'raw' => __NAMESPACE__ . '\RawEditor',
    'text' => __NAMESPACE__ . '\TextEditor',
    'patron' => __NAMESPACE__ . '\PatronEditor',
    'php' => __NAMESPACE__ . '\PHPEditor',
    'feed' => __NAMESPACE__ . '\FeedEditor',
    'image' => __NAMESPACE__ . '\ImageEditor',
    'node' => __NAMESPACE__ . '\NodeEditor',
    'widgets' => __NAMESPACE__ . '\WidgetsEditor'
);

Ainsi pour chaque clé/valeur on a l'identifiant de l'éditeur et la classe à utiliser pour l'instancier.

Obtenir un éditeur

Les exemples ci-dessus utilisent la notation $core->editors[] pour obtenir des éditeurs. La propriété editors est une propriété magique injectée par le module Editor en ajoutant le getter get_editors() au prototype de la classe ICanBoogie\Core, il s'agit d'un raccourcis vers la collection d'éditeurs :

<?php

$collection = \ICanBoogie\Modules\Editor\Collection::get();
$editor = $collection['rte'];

Revient au même que le code suivant :

<?php

$editor = $core->editors['rte'];

On préférera évidement utiliser le raccourcis.

Collection d'éditeur

La collection d'éditeurs regroupe les éditeurs disponibles. Elle est créée à partir de la configuration editors qui peut ensuite être altérée lors de l'évènement ICanBoogie\Modules\Editor\Collection::alter.

On peut traverser la collection pour obtenir la liste des éditeurs disponibles :

<?php

foreach ($core->editors as $editor_id => $definition)
{
    echo "editor: $editor_id<br />";
}

On notera que lorsque l'on traverse la collection ce ne sont pas les instances des éditeurs qui sont renvoyées mais leur définition.

Conclusion

L'API Éditeur est simple à utiliser et de nombreux éditeurs sont disponibles dès l'installation du CMS Icybee. Des éditeurs personnalisés peuvent facilement être ajoutés pour permettre la saisie des données les plus complexes de vos applications. De plus, grâce à l'éditeur multiple, l'utilisateur peut facilement choisir l'éditeur qui lui convient le mieux pour saisir ses contenus.

Laisser un commentaire

Pas de commentaire