S9y plugins: Adding codeTag into CKEditor

As you may have noticed, I blog a lot about code, computers and operating system configurations. In writtern form, it is very convenient to use Teletype Text -formatting. Here is a demo of the difference:

Do Until NoMoreSwaps = True
     NoMoreSwaps = True
     For Counter = 1 To (NumberOfItems - 1)
          If List(Counter) > List(Counter + 1) Then
               NoMoreSwaps = False
               Temp = List(Counter)
               List(Counter) = List(Counter + 1)
               List(Counter + 1) = Temp
          End If
     Next
     NumberOfItems = NumberOfItems - 1
Loop

and:

Do Until NoMoreSwaps =True
     NoMoreSwaps =True
     For Counter =1To(NumberOfItems -1)
          If List(Counter)> List(Counter +1)Then
               NoMoreSwaps =False
               Temp = List(Counter)
               List(Counter)= List(Counter +1)
               List(Counter +1)= Temp
          EndIf
     Next
     NumberOfItems = NumberOfItems -1
Loop

(Code sample courtesy of Rosetta Code) 

Any experienced software developer will prefer the fixed-width font. However, an out-of-the-box Serendipity blog software won't make that possible. I don't get the logic behind that, but there is a drastic change in functionality. To the not-so-user-friendly direction, I'd like to add.

Since version 2.0 S9y has been using CKEditor as HTML-editor on the admin-side. It is a pretty good component and has a number of excellent plugins already available. Getting a codeTag-plugin to work shouldn't be too hard, I guess. Yep! Guessed wrong.

Just downloading a zip-file, and uncompressing it at serendipity/htmlarea/ckeditor/ckeditor/plugins/-directory. Is a good start, but the editor won't react to that, something more is needed.

After a lot of investigating, I figured to add the name of the plugin into into serendipity/htmlarea/ckeditor_s9y_plugin.js. It has a line in it:

var customplugins = 'mediaembed,procurator,cheatsheet,';

adding codeTag into the list does absolutely nothing. It does load the plugin, but as a default, the plugin does nothing that you can see or touch. There is another file with list of editor's icons at serendipity/htmlarea/ckeditor_s9y_config.js. It has an array with list of icons to display:

config.toolbar_Default = []

It looks like this:

After adding this hash-definition into the config.toolbar_Default -array:

{ name: 'codetag',        items: [ 'Code' ] }

makes the icon to appear:

... but it doesn't do much when you click it.

Yet another round of debugging revealed, that there is a fixed list of allowed HTML-tags in the same file. The variable is called config.extraAllowedContent. The line is very long, but abbreviated version is something like this:

config.extraAllowedContent = 'mediainsert[*]{*}(*); ... ;pre[*](*);';

I added this to the end of the list:

code;tt;

Now it works as expected!

If you're planning a patch, here are my changes. Run it in serendipity/htmlarea/:

--- ckeditor_s9y_plugin.js.orig 2015-07-24 15:02:54.000000000 +0300
+++ ckeditor_s9y_plugin.js 2016-01-01 15:52:18.333527235 +0200
@@ -17,7 +17,7 @@
  // Plugin Dependencies: widget Add-on Dependencies: Line Utilities and Clipboard
  // mediaembed is a fast and simple YouTube code CKEditor-Plugin: v. 0.5+ (https://github.com/frozeman/MediaEmbed, 2013-09-12) to avoid ACF restrictions
  // procurator and cheatsheet are S9y only plugins
- var customplugins = 'mediaembed,procurator,cheatsheet,';
+ var customplugins = 'mediaembed,procurator,cheatsheet,codeTag,';

   // for any new instance when it is created - listen on load
  CKEDITOR.on('instanceReady', function(evt){

--- ckeditor_s9y_config.js.orig 2015-07-24 15:02:54.000000000 +0300
+++ ckeditor_s9y_config.js 2016-01-01 16:07:39.055518012 +0200
@@ -65,7 +65,7 @@
           - Allow for custom attributes/classes in code blocks
     */
     // protect
- config.extraAllowedContent = 'mediainsert[*]{*}(*);gallery[*]{*}(*);media[*]{*}(*);script[*]{*}(*);audio[*]{*}(*);div[*]{*}(*);span[*]{*}(*);img[height,width];pre[*](*);';
+ config.extraAllowedContent = 'mediainsert[*]{*}(*);gallery[*]{*}(*);media[*]{*}(*);script[*]{*}(*);audio[*]{*}(*);div[*]{*}(*);span[*]{*}(*);img[height,width];pre[*](*);code;tt;';
     // Do not use auto paragraphs, added to these allowed tags (only!). Please regard that this was marked deprecated by CKE 4.4.5, but is a need for (our use of) extraAllowedContent - check this again by future versions!
     config.autoParagraph = false; // defaults(true)

@@ -252,7 +252,8 @@
         { name: 'mediaembed', items: [ 'MediaEmbed' ] },
         { name: 'others', items: s9ypluginbuttons },
         { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
- { name: 'about', items: [ 'About' ] }
+ { name: 'about', items: [ 'About' ] },
+ { name: 'codetag', items: [ 'Code' ] }
     ];
 // console.log(JSON.stringify(config.toolbar_s9y));