Adding Macro as Buttons in CKEditor

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Adding Macro as Buttons in CKEditor

mahomed
Hi

With the editor in XWiki < v9.0.0 (GWT Editor), I could add different buttons and macros onto the toolbar by modifying the configuration and adding “macro:macroName” as a toolbar “feature”.

Has anyone got a simple step by step instructions for adding the same thing in CKEditor? I’ve tried looking at the documentation, but it doesn’t immediately or easily relate to the macros/add-ins (e.g. the lightbox macro/plugin is one we use a lot).

Thanks in advance for any help.


Kind regards,


Mahomed Hussein
Custodian Data Centre
Email: [hidden email]
http://www.CustodianDC.com
Reply | Threaded
Open this post in threaded view
|

Re: Adding Macro as Buttons in CKEditor

Marius Dumitru Florea
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <[hidden email]>
wrote:

> Hi
>
> With the editor in XWiki < v9.0.0 (GWT Editor), I could add different
> buttons and macros onto the toolbar by modifying the configuration and
> adding “macro:macroName” as a toolbar “feature”.
>
>

> Has anyone got a simple step by step instructions for adding the same
> thing in CKEditor? I’ve tried looking at the documentation, but it doesn’t
> immediately or easily relate to the macros/add-ins (e.g. the lightbox
> macro/plugin is one we use a lot).
>

The CKEditor integration doesn't support this ATM, unfortunately. Would be
great if you could make a feature request on
http://jira.xwiki.org/browse/CKEDITOR . Someone else also asked for this
recently so I could try to make some time to implement it but I can't
guarantee. If you can't wait and you know JavaScript you could try to
implement this yourself like this:

* read the CKEditor documentation for writing a plugin
http://docs.ckeditor.com/#!/guide/plugin_sdk_sample . You can write the
plugin in a JSX similar to
https://github.com/xwiki-contrib/application-ckeditor/blob/application-ckeditor-1.0/ui/src/main/resources/CKEditor/WikiSourcePlugin.xml
and load it like
https://github.com/xwiki-contrib/application-ckeditor/blob/application-ckeditor-1.0/ui/src/main/resources/CKEditor/EditSheet.xml#L154
* the "insertTimestamp" command defined in the example plugin from the
CKEditor documentation would open the macro editor and then insert macro
when the dialog is closed. Something like this is done in
https://github.com/xwiki-contrib/application-ckeditor/blob/master/plugins/src/main/resources/xwiki-macro/plugin.js#L160
.

But it's not very easy and I would like to implement something generic.

Thanks,
Marius


>
> Thanks in advance for any help.
>
>
> Kind regards,
>
>
> Mahomed Hussein
> Custodian Data Centre
> Email: [hidden email]
> http://www.CustodianDC.com
>
Reply | Threaded
Open this post in threaded view
|

Re: Adding Macro as Buttons in CKEditor

Marius Dumitru Florea
See http://jira.xwiki.org/browse/CKEDITOR-148 .

On Wed, Mar 1, 2017 at 11:45 AM, Marius Dumitru Florea <
[hidden email]> wrote:

> On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <[hidden email]
> > wrote:
>
>> Hi
>>
>> With the editor in XWiki < v9.0.0 (GWT Editor), I could add different
>> buttons and macros onto the toolbar by modifying the configuration and
>> adding “macro:macroName” as a toolbar “feature”.
>>
>>
>
>> Has anyone got a simple step by step instructions for adding the same
>> thing in CKEditor? I’ve tried looking at the documentation, but it doesn’t
>> immediately or easily relate to the macros/add-ins (e.g. the lightbox
>> macro/plugin is one we use a lot).
>>
>
> The CKEditor integration doesn't support this ATM, unfortunately. Would be
> great if you could make a feature request on http://jira.xwiki.org/browse/
> CKEDITOR . Someone else also asked for this recently so I could try to
> make some time to implement it but I can't guarantee. If you can't wait and
> you know JavaScript you could try to implement this yourself like this:
>
> * read the CKEditor documentation for writing a plugin
> http://docs.ckeditor.com/#!/guide/plugin_sdk_sample . You can write the
> plugin in a JSX similar to https://github.com/xwiki-
> contrib/application-ckeditor/blob/application-ckeditor-1.0/
> ui/src/main/resources/CKEditor/WikiSourcePlugin.xml and load it like
> https://github.com/xwiki-contrib/application-ckeditor/
> blob/application-ckeditor-1.0/ui/src/main/resources/
> CKEditor/EditSheet.xml#L154
> * the "insertTimestamp" command defined in the example plugin from the
> CKEditor documentation would open the macro editor and then insert macro
> when the dialog is closed. Something like this is done in
> https://github.com/xwiki-contrib/application-ckeditor/
> blob/master/plugins/src/main/resources/xwiki-macro/plugin.js#L160 .
>
> But it's not very easy and I would like to implement something generic.
>
> Thanks,
> Marius
>
>
>>
>> Thanks in advance for any help.
>>
>>
>> Kind regards,
>>
>>
>> Mahomed Hussein
>> Custodian Data Centre
>> Email: [hidden email]
>> http://www.CustodianDC.com
>>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Adding Macro as Buttons in CKEditor

mahomed
Thank you very much Marius

Sorry I didn't respond earlier, been crazy. I'll try this over the next few days and will let you know if I have issues. Otherwise assume it all worked great :) Thanks again.


Kind regards,




Mahomed Hussein
Custodian Data Centre
Email: [hidden email]
http://www.CustodianDC.com

-----Original Message-----
From: users [mailto:[hidden email]] On Behalf Of Marius Dumitru Florea
Sent: 02 March 2017 14:15
To: XWiki Users <[hidden email]>
Subject: Re: [xwiki-users] Adding Macro as Buttons in CKEditor

See http://jira.xwiki.org/browse/CKEDITOR-148 .

On Wed, Mar 1, 2017 at 11:45 AM, Marius Dumitru Florea < [hidden email]> wrote:

> On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein
> <[hidden email]
> > wrote:
>
>> Hi
>>
>> With the editor in XWiki < v9.0.0 (GWT Editor), I could add different
>> buttons and macros onto the toolbar by modifying the configuration
>> and adding “macro:macroName” as a toolbar “feature”.
>>
>>
>
>> Has anyone got a simple step by step instructions for adding the same
>> thing in CKEditor? I’ve tried looking at the documentation, but it
>> doesn’t immediately or easily relate to the macros/add-ins (e.g. the
>> lightbox macro/plugin is one we use a lot).
>>
>
> The CKEditor integration doesn't support this ATM, unfortunately.
> Would be great if you could make a feature request on
> http://jira.xwiki.org/browse/ CKEDITOR . Someone else also asked for
> this recently so I could try to make some time to implement it but I
> can't guarantee. If you can't wait and you know JavaScript you could try to implement this yourself like this:
>
> * read the CKEditor documentation for writing a plugin
> http://docs.ckeditor.com/#!/guide/plugin_sdk_sample . You can write
> the plugin in a JSX similar to https://github.com/xwiki-
> contrib/application-ckeditor/blob/application-ckeditor-1.0/
> ui/src/main/resources/CKEditor/WikiSourcePlugin.xml and load it like
> https://github.com/xwiki-contrib/application-ckeditor/
> blob/application-ckeditor-1.0/ui/src/main/resources/
> CKEditor/EditSheet.xml#L154
> * the "insertTimestamp" command defined in the example plugin from the
> CKEditor documentation would open the macro editor and then insert
> macro when the dialog is closed. Something like this is done in
> https://github.com/xwiki-contrib/application-ckeditor/
> blob/master/plugins/src/main/resources/xwiki-macro/plugin.js#L160 .
>
> But it's not very easy and I would like to implement something generic.
>
> Thanks,
> Marius
>
>
>>
>> Thanks in advance for any help.
>>
>>
>> Kind regards,
>>
>>
>> Mahomed Hussein
>> Custodian Data Centre
>> Email: [hidden email]
>> http://www.CustodianDC.com
>>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Adding Macro as Buttons in CKEditor

mahomed
In reply to this post by Marius Dumitru Florea
Hi Marius

I've tried to apply these changes with no luck I'm afraid.

Here are the steps I've taken:

1) Gone to Administer Wiki > Applications: WYSIWYG Editor > CKEditor and pasted the following below the comments in the "Advanced Configuration" box:

config['xwiki-macro'] = config['xwiki-macro'] || {};
config['xwiki-macro'].insertButtons = [
  'documentTree',
  {
    commandId: 'xwiki-macro-html-dirty',
    macroCall: {
      name: 'html',
      parameters: {
        clean: false,
        wiki: true
      }
    }
  }
];


2) I then went to Administration > Look & Feel : Presentation > Customise Color Theme > Advanced and then pasted the following CSS at the bottom:

a.cke_button.cke_button__xwiki-macro-documenttree > span.cke_button_icon.cke_button__xwiki-macro documenttree_icon {
  font-family: 'Glyphicons Halflings';
  position: relative;
  top: 1px;
}
.cke_button_icon.cke_button__xwiki-macro-documenttree_icon::before {
  content: "\e199";
  display: inline-block;
  text-align: center;
  width: 16px;
}

3) Edited a document and pressed Shift + F5 but nothing appeared on the toolbar.
4) Tried a different browser
5) Used Developer Tools in Chrome and can see both my changes in the relevant files (CKEditor/Config and skins/Flamingo/style.css)
6) I have tried different configurations from http://docs.ckeditor.com/#!/api/CKEDITOR.config such as config.toolbarLocation = 'bottom'; in step 1 above and I can see the config is being applied.

I had also already upgraded to 9.1.2 before trying to test this.

I can also see "xwiki-macro" as an available option in the "disabled plugins" drop down (Note that it is *not* disabled, it's just there as an option, which I assume is a good thing as it means the plugin is available).

Any ideas what I've missed or what else I could check please? Thanks.


Kind regards,




Mahomed Hussein
Custodian Data Centre
Email: [hidden email]
http://www.CustodianDC.com

-----Original Message-----
From: users [mailto:[hidden email]] On Behalf Of Marius Dumitru Florea
Sent: 02 March 2017 14:15
To: XWiki Users <[hidden email]>
Subject: Re: [xwiki-users] Adding Macro as Buttons in CKEditor

See http://jira.xwiki.org/browse/CKEDITOR-148 .

On Wed, Mar 1, 2017 at 11:45 AM, Marius Dumitru Florea < [hidden email]> wrote:

> On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein
> <[hidden email]
> > wrote:
>
>> Hi
>>
>> With the editor in XWiki < v9.0.0 (GWT Editor), I could add different
>> buttons and macros onto the toolbar by modifying the configuration
>> and adding “macro:macroName” as a toolbar “feature”.
>>
>>
>
>> Has anyone got a simple step by step instructions for adding the same
>> thing in CKEditor? I’ve tried looking at the documentation, but it
>> doesn’t immediately or easily relate to the macros/add-ins (e.g. the
>> lightbox macro/plugin is one we use a lot).
>>
>
> The CKEditor integration doesn't support this ATM, unfortunately.
> Would be great if you could make a feature request on
> http://jira.xwiki.org/browse/ CKEDITOR . Someone else also asked for
> this recently so I could try to make some time to implement it but I
> can't guarantee. If you can't wait and you know JavaScript you could try to implement this yourself like this:
>
> * read the CKEditor documentation for writing a plugin
> http://docs.ckeditor.com/#!/guide/plugin_sdk_sample . You can write
> the plugin in a JSX similar to https://github.com/xwiki-
> contrib/application-ckeditor/blob/application-ckeditor-1.0/
> ui/src/main/resources/CKEditor/WikiSourcePlugin.xml and load it like
> https://github.com/xwiki-contrib/application-ckeditor/
> blob/application-ckeditor-1.0/ui/src/main/resources/
> CKEditor/EditSheet.xml#L154
> * the "insertTimestamp" command defined in the example plugin from the
> CKEditor documentation would open the macro editor and then insert
> macro when the dialog is closed. Something like this is done in
> https://github.com/xwiki-contrib/application-ckeditor/
> blob/master/plugins/src/main/resources/xwiki-macro/plugin.js#L160 .
>
> But it's not very easy and I would like to implement something generic.
>
> Thanks,
> Marius
>
>
>>
>> Thanks in advance for any help.
>>
>>
>> Kind regards,
>>
>>
>> Mahomed Hussein
>> Custodian Data Centre
>> Email: [hidden email]
>> http://www.CustodianDC.com
>>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Adding Macro as Buttons in CKEditor

Marius Dumitru Florea
On Sat, Mar 11, 2017 at 5:01 PM, Mahomed Hussein <[hidden email]>
wrote:

> Hi Marius
>
> I've tried to apply these changes with no luck I'm afraid.
>
> Here are the steps I've taken:
>
> 1) Gone to Administer Wiki > Applications: WYSIWYG Editor > CKEditor and
> pasted the following below the comments in the "Advanced Configuration" box:
>
> config['xwiki-macro'] = config['xwiki-macro'] || {};
> config['xwiki-macro'].insertButtons = [
>   'documentTree',
>   {
>     commandId: 'xwiki-macro-html-dirty',
>     macroCall: {
>       name: 'html',
>       parameters: {
>         clean: false,
>         wiki: true
>       }
>     }
>   }
> ];
>
>
> 2) I then went to Administration > Look & Feel : Presentation > Customise
> Color Theme > Advanced and then pasted the following CSS at the bottom:
>
> a.cke_button.cke_button__xwiki-macro-documenttree >
> span.cke_button_icon.cke_button__xwiki-macro documenttree_icon {
>   font-family: 'Glyphicons Halflings';
>   position: relative;
>   top: 1px;
> }
> .cke_button_icon.cke_button__xwiki-macro-documenttree_icon::before {
>   content: "\e199";
>   display: inline-block;
>   text-align: center;
>   width: 16px;
> }
>
> 3) Edited a document and pressed Shift + F5 but nothing appeared on the
> toolbar.
> 4) Tried a different browser
> 5) Used Developer Tools in Chrome and can see both my changes in the
> relevant files (CKEditor/Config and skins/Flamingo/style.css)
> 6) I have tried different configurations from http://docs.ckeditor.com/#!/
> api/CKEDITOR.config such as config.toolbarLocation = 'bottom'; in step 1
> above and I can see the config is being applied.
>
> I had also already upgraded to 9.1.2 before trying to test this.
>
> I can also see "xwiki-macro" as an available option in the "disabled
> plugins" drop down (Note that it is *not* disabled, it's just there as an
> option, which I assume is a good thing as it means the plugin is available).
>
>

> Any ideas what I've missed or what else I could check please? Thanks.
>

http://jira.xwiki.org/browse/CKEDITOR-148 is fixed but not released. It
will be included in version 1.13, bu the latest version available right now
is 1.12 as can be seen on
http://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor+Integration .
You need to redo the steps you describe above after you upgrade to version
1.13.


>
>
> Kind regards,
>
>
>
>
> Mahomed Hussein
> Custodian Data Centre
> Email: [hidden email]
> http://www.CustodianDC.com
>
> -----Original Message-----
> From: users [mailto:[hidden email]] On Behalf Of Marius Dumitru
> Florea
> Sent: 02 March 2017 14:15
> To: XWiki Users <[hidden email]>
> Subject: Re: [xwiki-users] Adding Macro as Buttons in CKEditor
>
> See http://jira.xwiki.org/browse/CKEDITOR-148 .
>
> On Wed, Mar 1, 2017 at 11:45 AM, Marius Dumitru Florea <
> [hidden email]> wrote:
>
> > On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein
> > <[hidden email]
> > > wrote:
> >
> >> Hi
> >>
> >> With the editor in XWiki < v9.0.0 (GWT Editor), I could add different
> >> buttons and macros onto the toolbar by modifying the configuration
> >> and adding “macro:macroName” as a toolbar “feature”.
> >>
> >>
> >
> >> Has anyone got a simple step by step instructions for adding the same
> >> thing in CKEditor? I’ve tried looking at the documentation, but it
> >> doesn’t immediately or easily relate to the macros/add-ins (e.g. the
> >> lightbox macro/plugin is one we use a lot).
> >>
> >
> > The CKEditor integration doesn't support this ATM, unfortunately.
> > Would be great if you could make a feature request on
> > http://jira.xwiki.org/browse/ CKEDITOR . Someone else also asked for
> > this recently so I could try to make some time to implement it but I
> > can't guarantee. If you can't wait and you know JavaScript you could try
> to implement this yourself like this:
> >
> > * read the CKEditor documentation for writing a plugin
> > http://docs.ckeditor.com/#!/guide/plugin_sdk_sample . You can write
> > the plugin in a JSX similar to https://github.com/xwiki-
> > contrib/application-ckeditor/blob/application-ckeditor-1.0/
> > ui/src/main/resources/CKEditor/WikiSourcePlugin.xml and load it like
> > https://github.com/xwiki-contrib/application-ckeditor/
> > blob/application-ckeditor-1.0/ui/src/main/resources/
> > CKEditor/EditSheet.xml#L154
> > * the "insertTimestamp" command defined in the example plugin from the
> > CKEditor documentation would open the macro editor and then insert
> > macro when the dialog is closed. Something like this is done in
> > https://github.com/xwiki-contrib/application-ckeditor/
> > blob/master/plugins/src/main/resources/xwiki-macro/plugin.js#L160 .
> >
> > But it's not very easy and I would like to implement something generic.
> >
> > Thanks,
> > Marius
> >
> >
> >>
> >> Thanks in advance for any help.
> >>
> >>
> >> Kind regards,
> >>
> >>
> >> Mahomed Hussein
> >> Custodian Data Centre
> >> Email: [hidden email]
> >> http://www.CustodianDC.com
> >>
> >
> >
>
Reply | Threaded
Open this post in threaded view
|

Re: Adding Macro as Buttons in CKEditor

mahomed
Thanks Marius. I completely missed checking if it was released and assumed it was in 9.1.2 (don't ask why - it's why assumptions are bad :) )

I'll test again after the 1.13 release.


Kind regards,




Mahomed Hussein
Custodian Data Centre
Email: [hidden email]
http://www.CustodianDC.com

-----Original Message-----
From: users [mailto:[hidden email]] On Behalf Of Marius Dumitru Florea
Sent: 14 March 2017 10:19
To: XWiki Users <[hidden email]>
Subject: Re: [xwiki-users] Adding Macro as Buttons in CKEditor

On Sat, Mar 11, 2017 at 5:01 PM, Mahomed Hussein <[hidden email]>
wrote:

> Hi Marius
>
> I've tried to apply these changes with no luck I'm afraid.
>
> Here are the steps I've taken:
>
> 1) Gone to Administer Wiki > Applications: WYSIWYG Editor > CKEditor
> and pasted the following below the comments in the "Advanced Configuration" box:
>
> config['xwiki-macro'] = config['xwiki-macro'] || {};
> config['xwiki-macro'].insertButtons = [
>   'documentTree',
>   {
>     commandId: 'xwiki-macro-html-dirty',
>     macroCall: {
>       name: 'html',
>       parameters: {
>         clean: false,
>         wiki: true
>       }
>     }
>   }
> ];
>
>
> 2) I then went to Administration > Look & Feel : Presentation >
> Customise Color Theme > Advanced and then pasted the following CSS at the bottom:
>
> a.cke_button.cke_button__xwiki-macro-documenttree >
> span.cke_button_icon.cke_button__xwiki-macro documenttree_icon {
>   font-family: 'Glyphicons Halflings';
>   position: relative;
>   top: 1px;
> }
> .cke_button_icon.cke_button__xwiki-macro-documenttree_icon::before {
>   content: "\e199";
>   display: inline-block;
>   text-align: center;
>   width: 16px;
> }
>
> 3) Edited a document and pressed Shift + F5 but nothing appeared on
> the toolbar.
> 4) Tried a different browser
> 5) Used Developer Tools in Chrome and can see both my changes in the
> relevant files (CKEditor/Config and skins/Flamingo/style.css)
> 6) I have tried different configurations from
> http://docs.ckeditor.com/#!/ api/CKEDITOR.config such as
> config.toolbarLocation = 'bottom'; in step 1 above and I can see the config is being applied.
>
> I had also already upgraded to 9.1.2 before trying to test this.
>
> I can also see "xwiki-macro" as an available option in the "disabled
> plugins" drop down (Note that it is *not* disabled, it's just there as
> an option, which I assume is a good thing as it means the plugin is available).
>
>

> Any ideas what I've missed or what else I could check please? Thanks.
>

http://jira.xwiki.org/browse/CKEDITOR-148 is fixed but not released. It will be included in version 1.13, bu the latest version available right now is 1.12 as can be seen on http://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor+Integration .
You need to redo the steps you describe above after you upgrade to version 1.13.


>
>
> Kind regards,
>
>
>
>
> Mahomed Hussein
> Custodian Data Centre
> Email: [hidden email]
> http://www.CustodianDC.com
>
> -----Original Message-----
> From: users [mailto:[hidden email]] On Behalf Of Marius
> Dumitru Florea
> Sent: 02 March 2017 14:15
> To: XWiki Users <[hidden email]>
> Subject: Re: [xwiki-users] Adding Macro as Buttons in CKEditor
>
> See http://jira.xwiki.org/browse/CKEDITOR-148 .
>
> On Wed, Mar 1, 2017 at 11:45 AM, Marius Dumitru Florea <
> [hidden email]> wrote:
>
> > On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein
> > <[hidden email]
> > > wrote:
> >
> >> Hi
> >>
> >> With the editor in XWiki < v9.0.0 (GWT Editor), I could add
> >> different buttons and macros onto the toolbar by modifying the
> >> configuration and adding “macro:macroName” as a toolbar “feature”.
> >>
> >>
> >
> >> Has anyone got a simple step by step instructions for adding the
> >> same thing in CKEditor? I’ve tried looking at the documentation,
> >> but it doesn’t immediately or easily relate to the macros/add-ins
> >> (e.g. the lightbox macro/plugin is one we use a lot).
> >>
> >
> > The CKEditor integration doesn't support this ATM, unfortunately.
> > Would be great if you could make a feature request on
> > http://jira.xwiki.org/browse/ CKEDITOR . Someone else also asked for
> > this recently so I could try to make some time to implement it but I
> > can't guarantee. If you can't wait and you know JavaScript you could
> > try
> to implement this yourself like this:
> >
> > * read the CKEditor documentation for writing a plugin
> > http://docs.ckeditor.com/#!/guide/plugin_sdk_sample . You can write
> > the plugin in a JSX similar to https://github.com/xwiki-
> > contrib/application-ckeditor/blob/application-ckeditor-1.0/
> > ui/src/main/resources/CKEditor/WikiSourcePlugin.xml and load it like
> > https://github.com/xwiki-contrib/application-ckeditor/
> > blob/application-ckeditor-1.0/ui/src/main/resources/
> > CKEditor/EditSheet.xml#L154
> > * the "insertTimestamp" command defined in the example plugin from
> > the CKEditor documentation would open the macro editor and then
> > insert macro when the dialog is closed. Something like this is done
> > in https://github.com/xwiki-contrib/application-ckeditor/
> > blob/master/plugins/src/main/resources/xwiki-macro/plugin.js#L160 .
> >
> > But it's not very easy and I would like to implement something generic.
> >
> > Thanks,
> > Marius
> >
> >
> >>
> >> Thanks in advance for any help.
> >>
> >>
> >> Kind regards,
> >>
> >>
> >> Mahomed Hussein
> >> Custodian Data Centre
> >> Email: [hidden email]
> >> http://www.CustodianDC.com
> >>
> >
> >
>