Skip to content

Instantly share code, notes, and snippets.

@branflake2267

branflake2267/index-with-requirejs.html

Created November 17, 2019 00:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save branflake2267/e07e2e7c1ed3c906a790cc4dda0b3fc3 to your computer and use it in GitHub Desktop.
Save branflake2267/e07e2e7c1ed3c906a790cc4dda0b3fc3 to your computer and use it in GitHub Desktop.
Download ZIP
Froala Editor with RequireJs usage.
Raw
index-with-requirejs.html
<!DOCTYPE html>
<html>
<head>
<!-- Load CSS files. -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
// 1. Define the Froala Editor resources import path
require.config({
packages: [{
name: 'froala-editor',
main: 'js/froala_editor.min'
}],
paths: {
// Change this to your server if you do not wish to use our CDN.
'froala-editor': 'https://cdn.jsdelivr.net/npm/froala-editor@3.0.6'
}
});
</script>
</head>
<body>
<style>
#editor {
margin: 50px;
}
</style>
</head>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
// 3. Render the editor when the DOM is ready
require([
'froala-editor',
'froala-editor/js/plugins/align.min'
], function (FroalaEditor) {
new FroalaEditor('#editor')
});
});
</script>
<body>
<!-- 2. Declare where the editor will render -->
<div id='editor'></div>
</body>
</body>
</html>
@branflake2267
Copy link
Author

Screen Shot 2019-11-16 at 3 54 02 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment