[xwiki-devs] Best way to add buttons on wysiwyg toolbar
Hi, all, I am trying to add buttons on the wysiwyg or inline form editor toolbar, I checked the wysiwyg gwt source code, and the wysiwyg.js file, I am more toward add javascript code in wysiwyg.js file to add javascript code for buttons on the toolbar, instead of adding java code for the plugin, any suggestions? Thanks in advance Dave
In this case you don't need to modify any JavaScript file. You can write a JavaScript extension [1], load it only on edit action and use the WYSIWYG editor API [2] to access the editor and inject the buttons on the tool bar. Hope this helps, Marius [1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial#HMi... [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H... On Mon, May 28, 2012 at 5:25 PM, Geo Du <[email protected]> wrote:
Hi, all,
I am trying to add buttons on the wysiwyg or inline form editor toolbar, I checked the wysiwyg gwt source code, and the wysiwyg.js file, I am more toward add javascript code in wysiwyg.js file to add javascript code for buttons on the toolbar, instead of adding java code for the plugin, any suggestions?
Thanks in advance
Dave _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Got it, Thanks Dave On Tue, May 29, 2012 at 3:56 AM, Marius Dumitru Florea < [email protected]> wrote:
In this case you don't need to modify any JavaScript file. You can write a JavaScript extension [1], load it only on edit action and use the WYSIWYG editor API [2] to access the editor and inject the buttons on the tool bar.
Hope this helps, Marius
[1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial#HMi... [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H...
On Mon, May 28, 2012 at 5:25 PM, Geo Du <[email protected]> wrote:
Hi, all,
I am trying to add buttons on the wysiwyg or inline form editor toolbar, I checked the wysiwyg gwt source code, and the wysiwyg.js file, I am more toward add javascript code in wysiwyg.js file to add javascript code for buttons on the toolbar, instead of adding java code for the plugin, any suggestions?
Thanks in advance
Dave _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Hi, Marius, Thanks very much for your help, I got the button on the toolbar, but one requirement is that by default this button should be disabled, but when anyone of the images in the edited document is highlighted, the button should turn on and none of the images is highlighted, it then turns off. this behavior exists on some of the buttons, like the Bold, Italic buttons are turned off when an image is clicked. It seems I can not make it happen with javascript only, since I can not add event handler onclick to all the images, that means I need to do it from gwt plugin in the java side, any suggestions for this? Thanks again for your help. Dave On Tue, May 29, 2012 at 3:56 AM, Marius Dumitru Florea < [email protected]> wrote:
In this case you don't need to modify any JavaScript file. You can write a JavaScript extension [1], load it only on edit action and use the WYSIWYG editor API [2] to access the editor and inject the buttons on the tool bar.
Hope this helps, Marius
[1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial#HMi... [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H...
On Mon, May 28, 2012 at 5:25 PM, Geo Du <[email protected]> wrote:
Hi, all,
I am trying to add buttons on the wysiwyg or inline form editor toolbar, I checked the wysiwyg gwt source code, and the wysiwyg.js file, I am more toward add javascript code in wysiwyg.js file to add javascript code for buttons on the toolbar, instead of adding java code for the plugin, any suggestions?
Thanks in advance
Dave _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
On Wed, May 30, 2012 at 4:20 AM, Geo Du <[email protected]> wrote:
Hi, Marius,
Thanks very much for your help, I got the button on the toolbar, but one requirement is that by default this button should be disabled, but when anyone of the images in the edited document is highlighted, the button should turn on and none of the images is highlighted, it then turns off. this behavior exists on some of the buttons, like the Bold, Italic buttons are turned off when an image is clicked.
It seems I can not make it happen with javascript only, since I can not add event handler onclick to all the images, that means I need to do it from gwt plugin in the java side, any suggestions for this?
Event.observe(Wysiwyg.getInstance('content').getRichTextArea().contentWindow.document, 'click', function(event) { var target = event.element(); if (target.nodeName.toLowerCase() == 'img') { console.log('click on image'); } }); Hope this helps, Marius
Thanks again for your help. Dave
On Tue, May 29, 2012 at 3:56 AM, Marius Dumitru Florea < [email protected]> wrote:
In this case you don't need to modify any JavaScript file. You can write a JavaScript extension [1], load it only on edit action and use the WYSIWYG editor API [2] to access the editor and inject the buttons on the tool bar.
Hope this helps, Marius
[1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial#HMi... [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/WYSIWYG+Editor+Module#H...
On Mon, May 28, 2012 at 5:25 PM, Geo Du <[email protected]> wrote:
Hi, all,
I am trying to add buttons on the wysiwyg or inline form editor toolbar, I checked the wysiwyg gwt source code, and the wysiwyg.js file, I am more toward add javascript code in wysiwyg.js file to add javascript code for buttons on the toolbar, instead of adding java code for the plugin, any suggestions?
Thanks in advance
Dave _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
participants (2)
-
Geo Du -
Marius Dumitru Florea