Ajouter du code dans CKEditor

Ajouter du code dans CKEditor

Tags : JavaScript
Catégorie : Web
Mise en ligne : 13 Avril 2014 à 00:00

Si comme moi vous tenez un blog et vous cherchez un plugin CKEditor simple à utiliser mais très performant je vous conseil celui ci.

pbckcode, est un plugin développé par Pierre Baron, qui vous permet d'ajouter du code facilement dans vos textes. Le plugin ajoute directement les bonnes balises, les bonnes classes CSS. Il est compatible avec plusieurs plugins de colorations syntaxiques :

CKEDITOR.editorConfig = function( config ) {
     // CKEDITOR TOOLBAR CUSTOMIZATION
     // I only set the needed buttons, so feel frey to add those you want in the array
     config.toolbarGroups = [
         { name: 'pbckcode' } ,
         // you other buttons here
     ];
 
     // CKEDITOR PLUGINS LOADING
     config.extraPlugins = 'pbckcode'; // add other plugins here (comma separated)
 
     // ADVANCED CONTENT FILTER (ACF)
     // ACF protects your CKEditor instance of adding unofficial tags
     // however it strips out the pre tag of pbckcode plugin
     // add this rule to enable it, useful when you want to re edit a post
     config.allowedContent= 'pre[*]{*}(*)'; // add other rules here
 
     // PBCKCODE CUSTOMIZATION
     config.pbckcode = {
         // An optional class to your pre tag.
         cls : '',
 
         // The syntax highlighter you will use in the output view
         highlighter : 'PRETTIFY',
 
         // An array of the available modes for you plugin.
         // The key corresponds to the string shown in the select tag.
         // The value correspond to the loaded file for ACE Editor.
         modes :  [ ['HTML', 'html'], ['CSS', 'css'], ['PHP', 'php'], ['JS', 'javascript'] ],
 
         // The theme of the ACE Editor of the plugin.
         theme : 'textmate',
 
         // Tab indentation (in spaces)
         tab_size : '4'
     };
 };

Vous avez plus de 40 langage pris en compte et plus de 30 thèmes.

 ['C/C++'        , 'c_pp']
 ['C9Search'     , 'c9search']
 ['Clojure'      , 'clojure']
 ['CoffeeScript' , 'coffee']
 ['ColdFusion'   , 'coldfusion']
 ['C#'           , 'csharp']
 ['CSS'          , 'css']
 ['Diff'         , 'diff']
 ['Glsl'         , 'glsl']
 ['Go'           , 'golang']
 ['Groovy'       , 'groovy']
 ['haXe'         , 'haxe']
 ['HTML'         , 'html']
 ['Jade'         , 'jade']
 ['Java'         , 'java']
 ['JavaScript'   , 'javascript']
 ['JSON'         , 'json']
 ['JSP'          , 'jsp']
 ['JSX'          , 'jsx']
 ['LaTeX'        , 'latex']
 ['LESS'         , 'less']
 ['Liquid'       , 'liquid']
 ['Lua'          , 'lua']
 ['LuaPage'      , 'luapage']
 ['Markdown'     , 'markdown']
 ['OCaml'        , 'ocaml']
 ['Perl'         , 'perl']
 ['pgSQL'        , 'pgsql']
 ['PHP'          , 'php']
 ['Powershell'   , 'powershel1']
 ['Python'       , 'python']
 ['R'            , 'ruby']
 ['OpenSCAD'     , 'scad']
 ['Scala'        , 'scala']
 ['SCSS/Sass'    , 'scss']
 ['SH'           , 'sh']
 ['SQL'          , 'sql']
 ['SVG'          , 'svg']
 ['Tcl'          , 'tcl']
 ['Text'         , 'text']
 ['Textile'      , 'textile']
 ['XML'          , 'xml']
 ['XQuery'       , 'xq']
 ['YAML'         , 'yaml']

Vous pouvez télécharger le plugin ici : http://ckeditor.com/addon/pbckcode

Il est compatible CKEditor 4.0 à 4.3 pour sa version 1.2.1 (actuelle)

Démo

<Laisser un commentaire/>

* Champs obligatoire