Wysiwyg Module

The Wysiwyg Module provides APIs for the Wysiwyg editor. 

JavaScript API

The Wysiwyg JavaScript API is available in the file XWikiWysiwyg.js and it is stored on your filesystem under js/xwiki/wysiwyg/xwe/.

Methods

  • load() : void loads the WYSIWYG code on demand.

Example of code which loads the Wysiwyg editor when the page is loaded: 

{{velocity}}
$xwiki.jsfx.use("js/xwiki/wysiwyg/xwe/XWikiWysiwyg.js", true)
{{/velocity}}

Another possibility is to load Wysiwyg on demand, asynchronously. This way the editor code is loaded after your first call to Wysiwyg.onModuleLoad.

{{velocity}}
$xwiki.jsfx.use("js/xwiki/wysiwyg/xwe/XWikiWysiwyg.js", {'forceSkinAction': true, 'lazy': true})
{{/velocity}}

Finally, you can use the wysiwyg_import Velocity macro:

{{velocity}}
#set($lazy = false)
#wysiwyg_import($lazy)
{{/velocity}}
  • onModuleLoad(fCode : function, lazy : boolean) : void schedules a function to be executed after the WYSIWYG module is loaded. A call to this method forces the WYSIWYG module to be loaded, unless the second parameter, lazy, is set to true.
  • fireOnModuleLoad(): void executes all the functions scheduled on module load
  • maybeHookOnScriptLoad() : void tries to wrap onScriptLoad in order to be notified when the WYSIWYG script is loaded
  • hookGwtOnLoad() : void wraps gwtOnLoad in order to be notified when the WYSIWYG module is loaded
  • getInstance(hookId : String) : WysiwygEditor returns the WYSIWYG editor instance associated with the given hookId

Custom Events

  • xwiki:wysiwyg:created is fired after a WYSIWYG editor is successfully created.
  • xwiki:wysiwyg:loaded is fired after a WYSIWYG editor is successfully loaded.
  • xwiki:wysiwyg:showingWysiwyg is fired when the WYSIWYG tab was clicked and the rich text area is about to be reloaded.
  • xwiki:wysiwyg:showWysiwyg is fired after the WYSIWYG tab was loaded.
  • xwiki:wysiwyg:showingSource is fired when the Source tab was clicked and the source text area is about to be reloaded.
  • xwiki:wysiwyg:showSource is fired after the Source tab was loaded.

Wysiwyg Editor API

To create a new instance of the Wysiwyg editor, use the WysiwygEditorAPI constructor as follows:

Wysiwyg.onModuleLoad(function() {
  editor = new WysiwygEditor({hookId: 'content'});
});

Methods

  • public WysiwygEditorApi(JavaScriptObject jsConfig){} creates a new Wysiwyg Editor based on the given configuration object.
  • public HandlerRegistration addActionHandler(String actionName, JavaScriptObject jsHandler){} creates an action handler that wraps the given JavaScript function and registers it for the specified action where:
    • actionName is the name of the action to listen to
    • jsHandler is the JavaScript function to be called when the specified action occurs
  • public CommandManagerApi getCommandManagerApi(){} returns a JavaScript object that exposes the command manager used by the rich text area.
  • public String getParameter(String name){} returns the value of the specified configuration parameter. The full list of parameters is available in the "Wysiwyg Editor Configuration" page.
  • public JsArrayString getParameterNames(){} returns the list of editor configuration parameters.
  • public Element getPlainTextArea(){} returns the plain HTML text area element used by the editor.
  • public Element getRichTextArea(){} returns the rich text area element used by the editor.
  • public JavaScriptObject getSelectionRange(){} returns the selection range of the rich text area.
  • public void getSourceText(JavaScriptObject onSuccess, JavaScriptObject onFailure){} sends a request to the server to convert the HTML output of the rich text editor to source text and calls one of the given functions when the response is received.
  • public void release(){} releases the editor so that it can be garbage collected before the page is unloaded. This method should be called before the editor is physically detached from the DOM document.
  • public void setFocus(boolean focused){} focuses or blurs the WYSIWYG editor.
  • public void setSelectionRange(JavaScriptObject jsRange){} sets the selection range of the rich text area. The range parameter must have these properties:
    • startContainer - the DOM node where the selection starts
    • startOffset - the offset within the start container
    • endContainer - the DOM node where the selection ends
    • endOffset - the offset within the end container

Command Manager API

The CommandManagerAPI class is a part of the GWT Module and it is used to expose a CommandManager to the native JavaScript code.

CommandManager Methods

  • boolean execute(Command cmd, String param) executes a command on the current selection of the document edited with the underlying rich text area. The method returns true if the command was executed successfully and false otherwise.
  • String getStringValue(Command cmd); returns the value of the given command for the current selection in the document edited with the underlying rich text area. In most of the cases this value is the parameter used for executing the command.
  • boolean isEnabled(Command cmd); returns a boolean value that indicates whether the specified command can be successfully executed using the #execute(Command, String)} command, given the current selection of the document edited with the underlying rich text area.
  • boolean isExecuted(Command cmd) returns a boolean value that indicates the current state of the given command.
  • boolean isSupported(Command cmd) returns a boolean value that indicates whether the current command is supported by the underlying rich text area.

Example

if ( editor.getCommandManager().isEnabled('forecolor') ) {
  editor.getCommandManager().execute('forecolor', 'yellow');
  alert( editor.getCommandManager().getValue('forecolor') );
}

For more examples please check this page.

 

Related Pages

Search this space

 

Most popular tags

Failed to execute the [groovy] macro
  1. access rights
  2. activity stream
  3. annotation
  4. attachment
  5. comment
  6. Document Tree Macro
  7. export
  8. Extension Manager
  9. Flamingo skin
  10. global user
  11. Groovy event listener
  12. group
  13. nested page
  14. search
  15. skin
  16. syntax
  17. user
  18. user profile
  19. velocity macros
  20. wiki
  21. wysiwyg
  22. XWiki Applications
  23. xwikiattachment_archive table
  24. xwikiattachment table
  25. xwikiattrecyclebin table
  26. xwikiproperties table

[Display all tags from this space]