[xwiki-users] How to Add WYSIWIG toolbar button
Hi I have a problem where users want to highlight text in the WYSIWIG editor and press a button on the toolbar to automatically add the {{code}}, {{warning}} etc. start and end tags to the text. I know how to add a macro button and to style it. But the problem with the macro is that it pops up a form with a text area that you then need to fill in with text you want to put inside the tags. The behaviour I am looking for is similar to highlighting text and then pressing the Bold button on the toolbar. I have done some digging/searching/googling and found the simpledittoolbar.vm and I’ve customised this and added the copy to my skin. I have added the following code in the relevant sections and it works perfectly when I click Edit>Wiki but it doesn’t show on the toolbar when I click Edit>WYSIWIG. I am running XWiki 7.0 #set($discard = $syntax10Elements.add(['code', '{{code}}', '{{/code}}', 'page_code'])) #set($discard = $syntax20Elements.add(['code', '{{code}}', '{{/code}}', 'page_code'])) #set($discard = $confluence10Elements.add(['code', '{{code}}', '{{/code}}', 'page_code'])) So any idea how I can make the button show on the WYSIWIG toolbar? Alternatively how do I make the macro execute on the highlighted text? Thanks in advance. Kind regards, Mahomed
On Fri, Apr 24, 2015 at 7:27 PM, Mahomed Hussein <[email protected]> wrote:
Hi
I have a problem where users want to highlight text in the WYSIWIG editor and press a button on the toolbar to automatically add the {{code}}, {{warning}} etc. start and end tags to the text. I know how to add a macro button and to style it. But the problem with the macro is that it pops up a form with a text area that you then need to fill in with text you want to put inside the tags. The behaviour I am looking for is similar to highlighting text and then pressing the Bold button on the toolbar.
I have done some digging/searching/googling and found the simpledittoolbar.vm and I’ve customised this and added the copy to my skin. I have added the following code in the relevant sections and it works perfectly when I click Edit>Wiki but it doesn’t show on the toolbar when I click Edit>WYSIWIG. I am running XWiki 7.0
simpledittoolbar.vm affects only the wiki editor.
#set($discard = $syntax10Elements.add(['code', '{{code}}', '{{/code}}', 'page_code'])) #set($discard = $syntax20Elements.add(['code', '{{code}}', '{{/code}}', 'page_code'])) #set($discard = $confluence10Elements.add(['code', '{{code}}', '{{/code}}', 'page_code']))
So any idea how I can make the button show on the WYSIWIG toolbar? Alternatively how do I make the macro execute on the highlighted text?
It's not simple. You have two options: (1) Put a button on the toolbar with something like http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H... then listen on click and use http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H... #getSelectionRange() to access the selected text and then #getCommandManager() to http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H... #execute the 'macroInsert' command. The complex part is to understand the format of the command parameter. You can check https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwik... . (2) Write a plugin for the WYSIWYG editor from Java, but for this you'll have to recompile the editor and thus you'll end up with a custom editor, which is harder to maintain over time and may cause upgrade headaches. Hope this helps, Marius
Thanks in advance.
Kind regards,
Mahomed
_______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
participants (2)
-
Mahomed Hussein -
Marius Dumitru Florea