A CKEditor plugin to easily add code into your article
A CKEditor plugin to easily add code into your articles. The plugin will create a dialog where you will be able to format your code as your will. When you press the OK button, the plugin will create a pre tag with your code inside.
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'},
// your other buttons here
// get information about available buttons here: bhttp://docs.ckeditor.com/?mobile=/guide/dev_toolbar
];
// 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
// only needed on v1.1.x
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'
};
};
And you are good to go! You will have the same configuration than the demo.
Choose your synta highlighter output. Remove the option if you want to output a basic
tag, otherwise, choose one of them.'HIGHLIGHT' // http://highlightjs.org/ 'PRETTIFY' // https://code.google.com/p/google-code-prettify/ 'PRISM' // http://prismjs.com/ 'SYNTAX_HIGHLIGHTER' // http://alexgorbatchev.com/SyntaxHighlighter/
modes
// Available modes ['C/C++' , 'c_cpp'] ['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']
theme
// Bright themes 'chrome' 'clouds' 'crimson_editor' 'dawn' 'dreamweaver' 'eclipse' 'github' 'solarized_light' 'textmate' // default theme 'tomorrow' 'xcode' 'kuroir' 'katzenmilch'
// Dark themes 'ambiance' 'chaos' 'clouds_midnight' 'cobalt' 'idle_fingers' 'kr_theme' 'merbivore' 'merbivore_soft' 'mono_industrial' 'monokai' 'pastel_on_dark' 'solarized_dark' 'terminal' 'tomorrow_night' 'tomorrow_night_blue' 'tomorrow_night_bright' 'tomorrow_night_eighties' 'twilight' 'vibrant_ink'
Special Thanks