如何使用 Webpack 让 Jodit 使用捆绑版本的 Ace

Question

我已经在 Web 应用程序中使用带有 Webpack 的 Ace。我也成功地将 Jodit 添加到 Web 应用程序中。

不幸的是，Jodit 尝试使用一些自定义脚本加载机制动态加载它自己的 Ace 实例。

Jodit 开发者建议将 Ace URL 更改为 ./node_modules/ace-builds/src-min/ace.js (https://github.com/xdan/jodit/issues/48#issuecomment-387067777) 但是当然这不会使用 Webpack 捆绑的 Ace 副本。

虽然 Jodit 和 Ace 的两个实例都可以工作，但最好不要有两个不同的 Ace 实例。

我能否以某种方式将 Jodit 配置为使用 Ace 的捆绑版本而不是加载它自己的副本？

Answer 1

在 Jodit 源代码中进行了一些挖掘之后，这很容易。当全局对象中可用时，Jodit 会选择捆绑的库。

添加这些行后，Jodit 不再尝试动态加载 Ace，而且 Ace 本身可以找到它的模式和主题：

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.

为了使用自定义主题，这也行得通：

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：这也适用于 js-beautify：

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

此后 Jodit 使用捆绑库而不是第二次导入它。

如何使用 Webpack 让 Jodit 使用捆绑版本的 Ace

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

ace-editor

webpack

jodit