webpackace-editorjodit

How to make Jodit use a bundled version of Ace using Webpack

I'm already using Ace with Webpack in a web application. I successfully added Jodit to the web application, too.

Unfortunately Jodit tries to dynamically load its own Ace instance using some custom script loading mechanism.

The Jodit developer recommends changing the Ace URL to ./node_modules/ace-builds/src-min/ace.js (https://github.com/xdan/jodit/issues/48#issuecomment-387067777) But of course this doesn't use the Ace copy bundled by Webpack.

Although Jodit and both instances of Ace work, it would be nice to not have two different Ace instances.

Can I somehow configure Jodit to use the bundled version of Ace instead of loading its own copy?

Solution

  • After some digging in the Jodit source it was rather easy. Jodit picks up the bundled libraries when they are available in the global object.

    After adding these lines Jodit no longer tries to dynamically load Ace and also Ace itself can find its mode and theme:

    require('ace-builds/src-noconflict/ace')
require('ace-builds/src-noconflict/theme-idle_fingers') // Default theme used by Jodit
require('ace-builds/src-noconflict/mode-html')
// ...
new Jodit(el) // No additional libraries will be loaded.

    In order to use a custom theme, this works too:

    require('ace-builds/src-noconflict/ace')
require('ace-builds/src-noconflict/theme-sqlserver')
require('ace-builds/src-noconflict/mode-html')
// ...
new Jodit(el, { sourceEditorNativeOptions: { theme: 'ace/theme/sqlserver' } })

    PS: This works for js-beautify, too:

    window.html_beautify = require('js-beautify').html_beautify

    After this Jodit uses the bundled library instead of importing it a second time.