jodit
jodit copied to clipboard
xdan
jodit breaks when using requirejs
Jodit Version: 3.4.xxxxx
Browser: Chrome OS: Windows Is React App: False
dependencies
- jodit - //cdnjs.cloudflare.com/ajax/libs/jodit/3.19.3/jodit.min.js
- require - //requirejs.org/docs/release/2.3.6/minified/require.js
example file directory
js/
lib/
require.min.js
someotherlibrary.min
jodit/
jodit.min.js
jodit.min.css
index.html
error when loading jodit inside requirejs
Code 1
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/js/lib/jodit/jodit.min.css"/>
</head>
<body>
<textarea class="editor"></textarea>
<!-- include scripts -->
<script src="/js/lib/require.min.js"></script>
<script>
require.config({
baseUrl: 'js',
paths: {
jodit: "/lib/jodit/jodit.min",
}
});
})
</script>
<script>
require(["jodit"], ({Jodit}) => {
const renderRichhtml = (selector) => {
console.log('Jodit', Jodit)
Jodit.make(selector);
}
renderRichhtml('.editor');
});
</script>
<!-- end include scripts -->
</body>
</html>
Error when loading jodit outside of requirejs (but using requirejs for other things)
index.html
Code 2
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/js/lib/jodit/jodit.min.css"/>
<script src="/js/lib/jodit/jodit.min.js"></script>
</head>
<body>
<textarea class="editor"></textarea>
<!-- include scripts -->
<script src="/js/lib/require.min.js"></script>
<script>
require.config({
baseUrl: 'js',
paths: {
otherlibrary: "/lib/someotherlibrary.min",
}
});
})
</script>
<script>
require(["someotherlibrary"], (someotherlibrary) => {
const renderRichhtml = (selector) => {
console.log('Jodit', Jodit)
Jodit.make(selector); // exists on the window object.
}
renderRichhtml('.editor');
});
</script>
<!-- end include scripts -->
</body>
</html>
Expected behavior:
- to not cause javascript error when using both requirejs and jodit
- to work
Actual behavior:
error: require.min.js:1 Uncaught Error: Mismatched anonymous define() module: function(){return{js_beautify:t}}
I've found a temporary workaround though not ideal. It is ace.js that breaks require.js load.
I've forked the original project
fork - jodit
git clone jodit
cd jodit
npm i
npm start
edit - src/plugins/source/config.ts
- remove the references to load the source cdns: beautify, beautify-html, ace etc...
Config.prototype.sourceEditorCDNUrlsJS = [];
Config.prototype.beautifyHTMLCDNUrlsJS = [];
rebuild the project
npm build-no-uglify-es5
creates build/jodit.js
Download the original cdns and put into this directory
js/
lib/
beautify.min.js
beautify-html.min.js
Update the index page - jodit/index.html
<script src="/js/lib/beautify.min.js"></script>
<script src="/js/lib/beautify-html.min.js"></script>
<script src="/build/jodit.js"></script>
<!-- NOTE: including ace breaks the require.config so excluding it completely -->
<script src="/js/lib/require.min.js"></script>
<script>
require.config({
baseUrl: 'build'
});
</script>
<script>
require([], () => { // don't include it as a dependency.
console.log('loaded jodit', Jodit)
const editor = Jodit.make('#editor');
})
</script>
retest npm start localhost:2000
works
solution including jodit as a dependency via requirejs - shimming the other dependencies
<script>
require.config({
baseUrl,
paths: {
'beautify-html': "/js/lib/beautify-html.min",
'beautify-css': "/js/lib/beautify-css", // dynamic load from beautify-html
beautify: "/js/lib/beautify.min",
jodit: "/js/lib/jodit"
},
shim : {
'jodit': ['beautify', 'beautify-html', 'beautify-css']
},
</script>
<script>
require(['jodit'], ({Jodit}) => {
console.log('loaded jodit', Jodit)
const editor = Jodit.make('#editor');
})
</script>