[xwiki-users] Adding Macro as Buttons in CKEditor
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: Mahomed@CustodianDC.com http://www.CustodianDC.com
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <Mahomed@custodiandc.com> 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-ckedi... and load it like https://github.com/xwiki-contrib/application-ckeditor/blob/application-ckedi... * 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/sr... . 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: Mahomed@CustodianDC.com http://www.CustodianDC.com
See http://jira.xwiki.org/browse/CKEDITOR-148 . On Wed, Mar 1, 2017 at 11:45 AM, Marius Dumitru Florea < mariusdumitru.florea@xwiki.com> wrote:
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <Mahomed@custodiandc.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com -----Original Message----- From: users [mailto:users-bounces@xwiki.org] On Behalf Of Marius Dumitru Florea Sent: 02 March 2017 14:15 To: XWiki Users <users@xwiki.org> 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 < mariusdumitru.florea@xwiki.com> wrote:
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <Mahomed@custodiandc.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com -----Original Message----- From: users [mailto:users-bounces@xwiki.org] On Behalf Of Marius Dumitru Florea Sent: 02 March 2017 14:15 To: XWiki Users <users@xwiki.org> 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 < mariusdumitru.florea@xwiki.com> wrote:
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <Mahomed@custodiandc.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com
On Sat, Mar 11, 2017 at 5:01 PM, Mahomed Hussein <Mahomed@custodiandc.com> 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: Mahomed@CustodianDC.com http://www.CustodianDC.com
-----Original Message----- From: users [mailto:users-bounces@xwiki.org] On Behalf Of Marius Dumitru Florea Sent: 02 March 2017 14:15 To: XWiki Users <users@xwiki.org> 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 < mariusdumitru.florea@xwiki.com> wrote:
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <Mahomed@custodiandc.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com -----Original Message----- From: users [mailto:users-bounces@xwiki.org] On Behalf Of Marius Dumitru Florea Sent: 14 March 2017 10:19 To: XWiki Users <users@xwiki.org> Subject: Re: [xwiki-users] Adding Macro as Buttons in CKEditor On Sat, Mar 11, 2017 at 5:01 PM, Mahomed Hussein <Mahomed@custodiandc.com> 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: Mahomed@CustodianDC.com http://www.CustodianDC.com
-----Original Message----- From: users [mailto:users-bounces@xwiki.org] On Behalf Of Marius Dumitru Florea Sent: 02 March 2017 14:15 To: XWiki Users <users@xwiki.org> 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 < mariusdumitru.florea@xwiki.com> wrote:
On Mon, Feb 27, 2017 at 12:40 PM, Mahomed Hussein <Mahomed@custodiandc.com
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: Mahomed@CustodianDC.com http://www.CustodianDC.com
participants (2)
-
Mahomed Hussein -
Marius Dumitru Florea