Attention, cet article est obsolète et ce tuto est rédigé pour Symfony 2, je te déconseille d’appliquer ce que je dis là.

CKEditor est un éditeur WIZIWIG(What you see is what you get). Il est facilement personnalisable et de nombreux plugins sont disponibles.

Interface CKEditor

CKEditor avec IvoryCKEdirorBundle

Dans ce tuto, nous allons utiliser le bundle IvoryCKEditorBundle qui va nous simplifier l’intégration de CKEditor.

Instalation

{
"require": {
"egeloen/ckeditor-bundle": "4.*",
}
}

$bundles = array(
    // ...
    new Ivory\CKEditorBundle\IvoryCKEditorBundle(),
);

N’oublies pas d’installer les assets (si pas déjà fait par un composer update) :

php bin/console asset:install --symlink

Configuration

ivory_ck_editor:
    default_config:                     my_custom_config    # Utiliser par defaut la configuration my_custom_config
    configs:
        my_custom_config:
            language:                   "%locale%"
            toolbar:                    "standard"          # Charger la toolbar tollbar_1 (voir plus bas)
            stylesSet:                  "my_styles"         # Chargement des styles personnalisables my_styles (voir plus bas)
            uiColor:                    "#FCFCFC"           # Couleur de fond de l'interface
            height:                     "600px"             # Hauteur par défaut
            contentsCss:                ['bundles/app/css/style.css'] # Charge les styles dans l'éditeur (permet de voir en temps réel le résultat)
    styles:         # Configuration des styles personnalisables
        my_styles:
            - { name: "Alert Success", element: "div",  attributes: { class: "alert alert-success", role: "alert" }}
            - { name: "Alert Info", element: "div",  attributes: { class: "alert alert-info", role: "alert" }}
            - { name: "Alert Warning", element: "div",  attributes: { class: "alert alert-warning", role: "alert" }}
            - { name: "Alert Danger", element: "div",  attributes: { class: "alert alert-danger", role: "alert" }}
            - { name: "Badge", element: "span",  attributes: { class: "badge" }}

Utilisation

Pour charger CKEditor dans un formBuilder :

->add('content', CKEditorType::class, array (
    'label' => 'Contenu',
))

Tu peux aussi passer des options supplémentaires directement dans le formBuilder :

->add('content', CKEditorType::class, array (
    'label'             => 'Contenu',
    'config_name'       => 'my_custom_config',
    'config' => array(
        'language'    => 'fr'
    ),
))

Configuration avancée

Utiliser un skin

Télécharges un skin sur le site officiel et ajoutes le dans un répertoire public (dans /web/bundles/…)

Tu peux aussi l’ajouter dans un répertoire public d’un bundle et installer les assets.

ivory_ck_editor:
    configs:
        my_custom_config:
            skin: "skin_name,/absolute/web/skin/path/"

Personnalises la barre de boutons

De base, 3 types de toolbars sont pré-configurés : full, standard, basic.

ivory_ck_editor:
    configs:
        my_custom_config:
            toolbar: "standard"

Tu peux aussi personnaliser toi-même la toolbar :

ivory_ck_editor:
    default_config: "my_custom_config"
    configs:
        my_custom_config:
            uiColor:                    "#FCFCFC"
            toolbar:                    [ [ 'Preview' ], [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ], [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ], [ 'Source' ], [ "About" ], "/", [ 'Bold','Italic','Underline','Strike', 'Blockquote','Subscript','Superscript','-','RemoveFormat' ], [ 'NumberedList','BulletedList','-','Outdent','Indent','-','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ], [ 'Link','Unlink','Anchor' ], [ 'pbckcode', 'Image', 'Video', 'Table','SpecialChar','Iframe' ], '/', [ 'Styles', 'Format','Font','FontSize' ], [ 'TextColor','BGColor' ], [ 'RemoveFormat' ], [ 'Maximize' ] ]

Tu peux ajouter ou enlever des boutons à souhait. Retrouves la liste complète des boutons disponibles.

Il est aussi possible de définir des toolbars personalisées et les partager entre plusieurs configurations. Exemple :

ivory_ck_editor:
    configs:
        my_config_1:
            toolbar: "my_toolbar_1"
            uiColor: "#000000"
            # ...
        my_config_2:
            toolbar: "my_toolbar_2"
            uiColor: "#ffffff"
            # ...
    toolbars:
        configs:
            my_toolbar_1: [ "@document", "/", "@link" , "/", "@tool" ]
            my_toolbar_2: [ [ "Source", "-", "Save" ], "/", [ "Anchor" ], "/", [ "Maximize" ] ]
        items:
            document: [ "Source", "-", "Save" ]
            link:     [ "Anchor" ]
            tool:     [ "Maximize" ]

Utiliser un plugin

Télécharges un plugin sur le site de CKEditor et ajoutes le dans un répertoire public de votre application.

Exemple pour le plugin Vidéo qui nous permet d’ajouter des vidéos HTML5 dans l’éditeur :

Je le place dans mon répertoire src/AppBundle/Ressources/public/ckeditor/video puis :

php bin/console asset:install --symlink

config.yml

ivory_ck_editor:
    plugins:
        video:
            path:                       "/bundles/app/ckeditor/video/"
            filename:                   "plugin.js"
    default_config:    "my_custom_config"
    configs:
        my_custom_config:
            toolbar:                    [ ['Video' ], '/', [ 'RemoveFormat' ], [ 'Maximize' ] ]
            extraPlugins:               "'video"

Plus de documentation

Consultes le github du bundle ou la documentation par symfony de CKEditor.

Gestionnaire de média avec FMElfinderBundle

Tout va bien jusque là, mais pour ajouter une image, ça devient vite compliqué si elle est en local par exemple. On doit l’envoyer sur un serveur, trouver son lien direct, le copier, etc …

Pour palier à ce problème, nous allons utiliser un bundle qui va intégrer tout seul un gestionnaire de média à l’interface CKEditor. Ainsi tu pourra ajouter, modifier, supprimer les images, vidéos, pdfs, etc … directement depuis l’interface.

Exemple :

Gestionnaire de média

Installation de FMElfinderBundle

{
"require": {
"helios-ag/fm-elfinder-bundle": "6.*",
}
"config": {
"component-dir": "web/dossier_de_mon_choix" # Les ressources utilisés par fm-elfinder seront placées dans ce dossier
}
}

$bundles = array(
// ...
new FM\ElfinderBundle\FMElfinderBundle(),
);

elfinder:
     resource: "@FMElfinderBundle/Resources/config/routing.yml"

Configuration

fm_elfinder:
    assets_path: dossier_de_mon_choix # Le dossier configuré dans composer.json
    instances:
        ckeditor:
            locale:           "%locale%"
            editor:           "ckeditor"
            fullscreen:       false
            include_assets:   true
            connector:
                debug:        false
                roots:
                    uploads:
                        driver:           "LocalFileSystem"
                        path:             "your_path_in_public_directory"
                        upload_allow:     ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'application/zip', 'audio/mpeg', 'text/csv', 'video/mp4', 'video/webm', 'application/pdf']
                        upload_deny:      ['all']
                        upload_max_size:  "8M"
ivory_ck_editor:
    default_config:    my_custom_config
    configs:
        my_custom_config:
            toolbar:                    "full"
            filebrowserBrowseRoute:     "elfinder"
            filebrowserBrowseRouteParameters:
                instance: "ckeditor"

C’est tout ! Il ne reste plus qu’à essayer. Cliques sur ajouter une image et sur Explorer le serveur. N’oublies par de créer le répertoire ‘your_path_in_public_directory’ dans le répertoire web de votre application sinon CKEditor ne pourra pas envoyer les images et tu aura une alerte indiquant que votre configuration est invalide.

Utiliser le BBcode

Utiliser le BBcode permet d’éviter d’avoir du code html dans votre base de donnée. C’est plus ou moins une bonne pratique. Un code en BBcode ressemble à :

[b]Ceci est un texte d'exemple en gras[/b]
[url]http://www.domain.com[/url]

Ckeditor propose un plugin bbcode qu’il faut installer. (Revoir comment installer un plugin)

Ensuite un peu de configuration :

ivory_ck_editor:
    plugins:
        bbcode:
            path:                       '/bundles/app/js/ckeditor/bbcode/'
            filename:                   'plugin.js'
    configs:
        normal:
            # votre config sans bbcode ...
            # ...
        bbcode:
            toolbar:                    [[ 'Bold', 'Italic', 'Underline', 'BulletedList' ]]
            uiColor:                    "#FCFCFC"
            extraPlugins:               'bbcode'

Puis dans un formulaire, charges ckeditor en mode bbcode :

->add('content', 'ckeditor', array (
    'label'             => 'Contenu',
    'config_name'       => 'bbcode'
))

Afficher le BBcode

Pour afficher le BBcode, il va falloir le convertir en HTML. Pour celà, un bundle Symfony existe : FMBBCodeBundle.

Regardes la documentation du bundle pour l’installer et le configurer.Attention, il faut utiliser la version 7.* pour Symfony 3 et non la version 6 comme préconisée dans la documentation du bundle

Ce bundle ajoute un filtre twig qui te permet de rendre le BBcode. Exemple :

{{ content | bbcode_filter('default') }}

Et pour que le HTML soit interprété :

{{ content | bbcode_filter('default') | raw }}</pre>

Utiliser un colorateur syntaxique de code intégré à CKEditor

Nous allons voir ici comment utiliser un colorateur de code. J’utilise sur cette page la bibliothèque highligh.js pour colorer le code.

Commençons par installer le plugin pbckcode dans votre fichier config.yml :

ivory_ck_editor:
    plugins:
        pbckcode:
            path:                       '/bundles/unixeliaapp/ckeditor/pbckcode/'
            filename:                   'plugin.js'
    default_config:    my_custom_config
    configs:
        my_custom_config:
            toolbar:                    ['pbckcode']
            extraPlugins:               'pbckcode'
            pbckcode:                   { highlighter : 'HIGHLIGHT', tab_size : '4', theme : 'github',  modes :  [['Text', 'text'],['HTML', 'html'], ['CSS', 'css'], ['PHP', 'php'], ['JS', 'javascript'], ['YAML', 'yaml'], ['JSON', 'json'], ['SQL', 'sql'], ['Bash', 'bash']], js : "https://cdn.jsdelivr.net//ace/1.1.4/noconflict/" }

Sur votre page d’affichage du contenu, il va falloir ajouter le script highlight.js et l’éxécuter. Exemple :

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.5/styles/default.min.css">

{{ content | raw }}

<script src="//cdn.jsdelivr.net/highlight.js/8.5/highlight.min.js"></script>

<script>
    $(document).ready(function() {
        $('code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
</script>