Comment créer un « Lire la suite » avec TinyMCE

Pourquoi « lire la suite » ?

Récemment, j’ai eu besoin d’intégrer un système d’actualité pour mon application d’alerte mail leboncoin.fr. Le problème provient des actualités avec un long contenu. Une actualité peut effectivement occuper une grande place sur la page. Si bien que les autres passent un peu inaperçues.

La solution est donc de tronquer l’actualité afin de la rendre d’une taille raisonnable, linéarisant ainsi la page. En outre, cette technique permet d’éviter d’avoir du contenu dupliqué dans votre site web. Ce qui sera apprécié pour un bon référencement.

Pour la rédaction des articles, j’utilise TinyMCE. Je souhaite donc ajouter un bouton permettant d’insérer un élément séparateur indiquant l’endroit où l’article sera tronqué.

Configuration de TinyMCE

WordPress prend en charge cette fonctionnalité, comme vous pourrez le constater avec ce blog. Il va même plus loin en permettant la séparation de l’article en plusieurs pages.

Comme je n’ai pas d’expérience sur la création d’extension avec TinyMCE (peut-être un jour), j’ai tout simplement récupéré le code source de l’extension créée par WordPress (merci l’Open Source). J’ai tout de même fait du ménage afin de ne garder que l’essentiel pour notre usage.

J’ai donc recréé une archive que vous pouvez télécharger directement sur ce lien. Une fois téléchargée, décompressez l’archive dans le répertoire « plugins » de votre TinyMCE.

Maintenant que le répertoire est bien placé, il faut activer l’extension dans l’initialisation de TinyMCE. En théorie, vous devriez avoir un code ressemblant à cela :

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    language : "en",
    plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,
        advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,
        preview,media,searchreplace,print,contextmenu,paste,directionality,
        fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
        template",

    // Theme options
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : false
});

S’il y a des différences, ce n’est pas important, il suffit d’adapter à votre cas.

Il y a donc deux modifications à effectuer. L’une va indiquer à TinyMCE de charger le plugin, et l’autre va ajouter un bouton dans la barre d’outil.

Voici le nouveau code :

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    language : "en",
    plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,
        advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,
        preview,media,searchreplace,print,contextmenu,paste,directionality,
        fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
        template,wordpress",

    // Theme options
    theme_advanced_buttons3_add: "wp_more",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : false
});

J’ai surligné les deux lignes en question. Nous ajoutons « wordpress » à la liste des plugins (l.10) ainsi que le bouton adéquat à la ligne 13.

Le paramètre « theme_advanced_buttons3_add » indique à l’éditeur d’ajouter le bouton à la fin de la troisième barre d’outil. Vous pouvez donc mettre 1 ou 2 selon l’endroit où vous souhaitez placer le bouton.

À ce stade, l’éditeur devrait ressembler à cela :

TinyMCE est maintenant près. Si vous cliquez sur le bouton, une barre va venir se placer à l’endroit du curseur. Si vous regardez le code source (bouton HTML), vous remarquerez le code suivant : <!–more–>. Ce code représente un commentaire HTML, ce qui ne pourri pas votre code HTML. Nous traiterons ce dernier pour couper l’article.

Une remarque tout de même. Il est important de mettre le marqueur sur un paragraphe à lui, ce qui ressemble à cela dans la source HTML : <p><!–more–></p>.
Si vous ne procédez pas ainsi, vous risquez de perdre des balises de fin.

À PHP de bosser maintenant

Maintenant que nous avons notre marqueur, nous allons pouvoir le traiter pour l’affichage.

Je ne vais pas traiter ici la boucle d’affichage des articles, mais simplement la partie où le contenu de l’article est affiché. Pour aller plus vite, je vous donne directement le code :

// $content contient le contenu de l'article, à vous de le remplacer à votre convenance.
if (false !== strpos($content, '<p><!--more--></p>')) { // on vérifie s'il est possible de tronquer l'article
    $aContent = explode('<p><!--more--></p>', $content); // on explose le contenu
    $content = $aContent[0]; // on récupère la première partie
    /**
     * On crée un lien "Lire la suite". On pointe vers une ancre qui nous placera
     * directement au bon endroit de l'article.
     * À vous de personnaliser le lien comme il faut.
     */
    $content .= '<a href="/article.php?id='.$id.'#more-'.$id.'">Lire la suite</a>';
}
echo $content; // on fini par afficher le contenu

Voilà, en gros, on découpe le contenu suivant le marqueur. Rien de bien compliqué.

Ensuite, sur la page de l’article affiché en entier, il faut ajouter une ancre permettant de positionner l’éventuel ascenseur au bon endroit. Ainsi, on évite au pauvre lecteur de scroller comme un dingue.

Voici donc le code :

// $content contient le contenu de l'article, à vous de le remplacer à votre convenance.
if (false !== strpos($content, '<p><!--more--></p>')) {
    $content = str_replace('<p><!--more--></p>', '<span id="more-'.$id.'">&nbsp;</span>', $content);
}
echo $content;

Voilà, un simple str_replace suffit amplement pour remplacer le marqueur par un « span » discret.

Conclusion

C’est une version vraiment simpliste et il y a des inconvénients.

Le principal, à mon sens, est le risque de casser la validation xHTML si vous ne placez pas correctement le marqueur, car tout se qui se trouve après celui-ci sera supprimé. Mais pour une utilisation basique, cela suffit largement.

Que pensez-vous de cette solution ?

3 réflexions sur « Comment créer un « Lire la suite » avec TinyMCE »

  1. Merci,
    très pratique, de plus sa me donne un début de réponse pour un article sur plusieurs page, ou quasi toute la réponse 😀 , je trouverai bien comment adapter.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.