CKEditor SyntaxHighlighter

Par BaBeuloula, il y a 12 ans

Javascript

Bonjour à tous,

Je cherche désespérément à installer le plugin SyntaxHighlighter pour CKEditor. J'ai bien mis le plugin dans le dossier plugin, je le charge bien dans extraPlugins, et je le mets dans la toolbar. Sauf que je n'ai rien dans mon éditeur de code.

Vous savez pourquoi ?

CKEDITOR.replace('editeur', {
        toolbar: 
            'Undo','Redo'],
            'Cut','Copy','Paste'],
            'Bold','Italic','Underline','RemoveFormat'],
            'TextColor','FontSize'],
            'Image'],
            'NumberedList','BulletedList'],
            'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            'Link','Unlink'],
            'syntaxhighlight','Source']
        ],
        height: 400,
        width: 820,
        extraAllowedContent: 'div(*);html(*);head(*);style(*);body(0);pre(*)',
        allowedContent: true,
        resize_maxWidth: 820,
        resize_minWidth: 820,
        removePlugins: 'elementspath',
        language: 'fr',
        enterMode: CKEDITOR.ENTER_P,
        shiftEnterMode: CKEDITOR.ENTER_BR,
        entities: true,
        pasteFromWordRemoveStyles: true,
        pasteFromWordRemoveFontStyles: true,
        disableNativeSpellChecker: true,
        extraPlugins: 'syntaxhighlight,dialog'
    });

Merci d'avance

4 réponses

Pakito, il y a 12 ans

J'ai regardé la doc du plugin, et il est indiqué que ce plugin va aller chercher une balise <pre> qui aurait une classe spécifique et c'est dans cette balise que sera faite la coloration syntaxique.

Par ailleurs il est indiqué que tous les tags HTML < et > doivent être échappés en < et > pour que cela fonctionne.

Y a aussi la méthode script qui semble attendre du CDATA mais pas obligatoirement

A ce que je comprends de la façon dont tu initialises CKEditor, tu cherches à faire que lors d'un clic sur le bouton "Code" de la toolbar, le code affiché soit coloré. Est-ce bien cela ?

En cherchant un peu, pas mal de gens ce sont plaint du non-fonctionnement du plugin selon leur configuration, et en effet quand on regarde la librairie des plugins, les versions de SyntaxHighlight sont loin d'être toutes compatibles avec CKE : http://ckeditor.com/addon/syntaxhighlight

Le souci pourrait venir de là.

BaBeuloula, il y a 12 ans

Je vais donner plus d'infos sur ce plugin :

SyntaxHighlighter va bien chercher les balises PRE avec la classe spécifique. Sauf que l’intérêt du plugin CKEditor, il permet au sein de CKEditor d'ajouter du code avec ces balises.

Je ne cherche pas à afficher SyntaxHighlighter lors du clic sur le bouton code, car ce plugin affiche juste une popup :

Je viens de tester avec la 4.1.3, rien, et la 4.3.* les icons ne sont pas les bons. Les icones pour annuler et rétablir sont ceux des puces.

Je vais continuer à chercher. Si d'autres ont des idées ...

BaBeuloula, il y a 12 ans

Effectivement le tien fonctionne. J'adopte ! En tout cas GG mec !