The Monaco editor widget was built with extensibility in mind. The PrimeFaces widget is a JSF wrapper
component that lets you integrate the editor easily in a JSF page and provides several options for the
most common features. Sometimes, however, it may become necessary to customize the editor event further.
In that case, you can make use of the extensive
client-side JavaScript API provided by the Monaco editor.
To do so, specify the extender
option on the editor. This lets you set a custom JavaScript object with
several callback methods for the lifecycle of the Monaco editor. For example, you can modify the editor options
before the editor is created, or add TypeScript declaration files for improved IntelliSense. The example below loads
the declaration files for JQuery from the DefinitelyTyped
GitHub repo and adds them to the editor. This
enables autocomplete and docs for JQuery function.
For the inline widget, you can just specify a JavaScript expression that evaluates to an extender object. For the
framed widget, you will need to specify an URL to a JavaScript file that creates the extender and writes it to
window.MonacoEnvironment.Extender
. See the panel to the right for more info about the extender object.
Please note that for the framed widget, the extender is run in the iframe context and will not have
access to JQuery nor to PrimeFaces related functions.
The extenders you see in the example below use the fetch
API and other modern JavaScript
features. If you need to support old browsers, consider using XMLHttpRequest
instead of
fetch
instead.
Finally, you can also check out the
Monaco editor playground which contains
many more examples of how you can use the client-side API to customize the editor.
${showcase:getFileContent('/sections/monacoEditor/example-extenderDiff.xhtml')}
${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/MonacoEditorController.java')}
${showcase:getFileContent('/resources/js/monacoExtender.js')}