New WYSIWYG "Load on demand using velocity macros" documentation


On my xwiki x8.4.6 I use a velocity application with WYSIWYG editor, but now I need (?) to upgrade my application with new CKEditor (because old WYSIWIG is not buddled anymore with xwiki 9.11.x version)

When I writed my application I use this nice documentation:

Load WYSIWIG on demand using velocity macros documentation with examples to do it.

Unfortunaly I didn’t found an equivalent to do the same (or doc to upgrade my application with old WYSIWIG editor)…

Maybe I didn’t search enough ?

My application displayed


lazy? My app is so rude with me now! :wink:



This is a Velocity macro specific to the old GWT-based WYSIWYG editor that has been removed. The CKEditor is implementing the generic Edit API so it doesn’t have custom velocity macros. Here’s an example of how the edit script service is used . There’s no support for “load on demand” ATM but you can workaround it easily by loading the editor hidden and then showing it when some button is clicked.

What I want to do on my form is:

  • display a input field
  • display a long input field with WYSIWIG
  • and catch the content of these fields to clean them with velocity variable and send them to another page with redirect
    (try to remember my old code :frowning: )

ty I will read the edit script service, I think that will help me a lot.

Ok I use your xwiki code to display a WYSIWYG textarea on my page in view mode.
I have an issue anyways, when I submit my form this popup message is displayed:
“This page is asking you to confirm that you want to leave - data you have entered may not be saved.” “Stay on page” | “Leave page”
Do you know how I can avoid it?


I add this:

config['xwiki-save'].leaveConfirmation = false;

in xwiki preferences

Can I disabled it only on my forms? and how?
I use $!services.edit.syntaxContent.wysiwyg(

ATM you can’t pass CKEditor configuration parameters through $services.edit.syntaxContent.wysiwyg() but you can change the editor configuration just after the editor instance is created, using option 2 from (from a JSX). Of course, in your case you should load the JSX on demand, just for your page.

1 Like

Wonderful, ty you save my dayS … again! :slight_smile:

Here my velocity code:

      <div id="xwikieditcontent">
        $!services.edit.syntaxContent.wysiwyg('', 'xwiki/2.1', {
          'id': 'WwLibSigleId',
          'name': 'TxtAreaLibSigle',
          'rows': 10,
          'cols': 40,
          'full': true

and my JSX:

       // The editor configuration has been loaded (the instance configuration has been merged with the global
       // configuration) but the editor has not been fully initialized yet so we can modify the configuration.['xwiki-save'], {
          leaveConfirmation: false
        }, true);