Ajouter du code dans CKEditor
Je ne publierai plus rien sur ce blog. Un nouveau blog existe maintenant. Il se nomme Hardly Smart.
Vous pourrez y retrouver des astuces plus larges sur l'informatique ainsi que mes anciens billets de blog.
Je vous souhaite une bonne lecture sur Hardly Smart.
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 :
- Google Code Prettify
- Prism.js
- Highlight.js
- Syntaxhighlighter (celui que j'utilise)
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)
Demo
Articles liés
Les commentaires ont été désactivés.