How to put a dedicated Insert and Excecute Macro Button on the CKEDITOR tool bar?

Help / Discuss
1

First some experiences:

The document

describes how to put an additional button to editor tool bar.

It is not so complex, but there some pitfalls:

edit the object “CKEditor.ConfigClass” in CKEditor.Config
where the used commandId key must be found in the two css-declarations
of the XWiki.StyleSheetExtension object like

a.cke_button.cke_button__xwiki-macro-html-dirty 
    > span.cke_button_icon.cke_button__xwiki-macro-html-dirty_icon {
... }

a.cke_button.cke_button__xwiki-macro-html-dirty 
   > span.cke_button_icon.cke_button__xwiki-macro-html-dirty_icon {

You need lower cases!
There are some doubled underline characters!
Don’t forget to activate the parameter Load JavasScript Skin Extension in the Object.

The CKEditor uses the font-family: ‘Glyphicons Halflings’.
To keep the editor’s design consistent, one should continue to use this font

A little help - the following code generates some tables of available characters:

(% style="font-family:'Glyphicons Halflings';font-size:250%" %)
(((
{{groovy}}
hex=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]
outerhex=["20","21","22","23","24","25","26","27","2a","29","2a","2b",
          "e0","e1","e2"]                                              // private use of unicode
R="{{html}}"
outerhex.each{ t -> 
R+="<table class='table-bordered' style='width:auto'><tr><td style='text-align:right;background-color:grey'>x=</td>"
  hex.each{k-> R+="<td style='background-color:lightgray;text-align:center'><b >"+k+"</td>"}
  R+="</tr>"
  hex.each{i -> 
     R+="<tr><td style='background-color:lightgray'><b>"+t+i+"x</b></td>"
     hex.each{ j->  R+= "<td style='text-align:center'>&#x"+t+i+j+";</td>"
     }
  R+="</tr>\n"
  }
  R += "</table><br/>"
}
R + "{{/html}}"
{{/groovy}}
)))

Back to the question:

The new button will open a modal window to modify the macro parameter.

But how to define a button that will execute the macro with the given defined parameter at once?

The standard “table of content” does.

Thanks for help

Norbert

2

Where can I find the CKEditor.Config file?

3

type: (CTRL) G CKEDITOR

or change the link that it ends with
/bin/edit/CKEditor/Config
or to start the object editor
/bin/edit/CKEditor/Config?editor=object

4

It’s not doable from configuration, ATM, but you can do it from a custom plugin (or some JavaScript code that executes right before the editor is loaded). The Macro plugin provides an editor command to insert macros directly. Try this from the JavaScript console:

CKEDITOR.instances.content.execCommand('xwiki-macro-insert', {
  name: 'info',
  parameters: {
    title: 'Foo'
  },
  content: 'bar'
})

So what you need to do is similar to application-ckeditor/application-ckeditor-plugins/src/main/resources/xwiki-macro/plugin.js at master · xwiki-attic/application-ckeditor · GitHub but using the xwiki-macro-insert command instead of xwiki-macro.

It should be easy to add a flag to the data passed to config['xwiki-macro'].insertButtons configuration to choose between inserting directly or through the wizard (the current behavior). Please report an issue on Loading...

Thanks,
Marius