La création d’un modèle de template en CKEditor

16 Sep La création d’un modèle de template en CKEditor

La première étape est l’ajout de la ligne si dessous dans dans le fichier config.js situé dans le dossier ckeditor

config.templates_files = [ '/CHEMIN_VERS_LE_DOSSIER_CKEDITOR/ckeditor/plugins/templates/templates/mytemplates.js' ];

Ensuite on crée le fichier mytemplates.js

// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
    // The name of the subfolder that contains the preview images of the templates.
    imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

    // Template definitions.
    templates :
        [
            {
                title: 'Image et Title',
                image: 'template1.gif',
                description: 'Une image avec du texte.',
                html:
                    '<h3>' +
                        '<img style="margin-right: 10px" height="100" width="100" align="left"/>' +
                        'Type the title here'+
                    '</h3>' +
                    '<p>' +
                        'Type the text here' +
                    '</p>'
            },
            {
                title: 'Deux partie',
                image: 'template2.gif',
                description: 'Une template avec deux colonnes.',
                html:
                    '<table cellspacing="0" cellpadding="0" style="width:100%" border="0">' +
                        '<tr>' +
                            '<td style="width:50%">' +
                                '<h3>Title 1</h3>' +
                            '</td>' +
                            '<td></td>' +
                            '<td style="width:50%">' +
                                '<h3>Title 2</h3>' +
                            '</td>' +
                        '</tr>' +
                        '<tr>' +
                            '<td>' +
                                'Text 1' +
                            '</td>' +
                            '<td></td>' +
                            '<td>' +
                                'Text 2' +
                            '</td>' +
                        '</tr>' +
                    '</table>' +
                    '<p>' +
                        'More text goes here.' +
                    '</p>'
            }
        ]
});

Le modèle se comporte par: