Plugin CKEditor - Strinsert

Rédigé par Angeraph - - Aucun commentaire

Strinsert est un petit plugin qui permet d'ajouter un menu déroulant dans la barre d'outil de CKEditor. Il peu-être très utile pour l'insertion de chaîne de caractère préformatée, à l'endroit désiré d'un article. Utile dans mon cas pour l'ajout d'un saut de page que je veux ajouter ou je veux et sans devoir me taper tout le code HTML à chaque fois. Voir l'article sur la mise en page d'une page web avant impression. 

Pour cela, il suffit d'installer le plugin sur le serveur, et de l'activer via l'interface administrateur PluxmlPluginsCKEDitorConfiguration.

enlightenedAttention aux dépendances des plugins. Ici le plugin Rich Combo est requis en dépendance de strinsert.

Ensuite, il ne reste plus qu'à mettre les mains dans le code pour la configuration du menu déroulant. Pour cela il suffit d'éditer le fichier plugin.js du plugin strinsert, et d'ajouter les options voulues. Pour l'exemple, on ajoutera l'option ''saut de page'' et ''mail'' formatée en HTML. En rouge das la partie code sont les parties éditées.

  • <p style="page-break-after:always;"></p>
  • <a href="mailto:angeraph@free.fr">angeraph@free.fr</a>

Ce qui donnera:

 

Code

Fichier à éditer : <votre pluXML>pluginsckeditorckeditorpluginsstrinsertplugin.js
CKEDITOR.plugins.add('strinsert',
{
    requires : ['richcombo'],
    init : function( editor )
    {
        //  array of strings to choose from that'll be inserted into the editor
        var strings = [];
        strings.push(['<p style="page-break-after:always;"></p>', 'Break Page', 'Break Page']);
        strings.push(['<a href="mailto:angeraph@free.fr">angeraph@free.fr</a>', 'Mail: Angeraph', 'Mail: Angeraph']);
        
        // add the menu to the editor
        editor.ui.addRichCombo('strinsert',
        {
            label:         'Insérer',
            title:         'Insérer',
            voiceLabel:    'Insérer',
            className:     'cke_format',
            multiSelect:false,
            panel:
            {
                css: [ editor.config.contentsCss, CKEDITOR.skin.getPath('editor') ],
                voiceLabel: editor.lang.panelVoiceLabel
            },
            init: function()
            {
                this.startGroup( "Code HTML" );
                for (var i in strings)
                {
                    this.add(strings[i][0], strings[i][1], strings[i][2]);
                }
            },
            onClick: function( value )
            {
                editor.focus();
                editor.fire( 'saveSnapshot' );
                editor.insertHtml(value);
                editor.fire( 'saveSnapshot' );
            }
        });
    }
})

Écrire un commentaire

Quelle est le dernier caractère du mot 4j81pkl ?