Skip to content

Instantly share code, notes, and snippets.

@evo42
Created February 16, 2012 16:28
Show Gist options
  • Save evo42/1846236 to your computer and use it in GitHub Desktop.
Save evo42/1846236 to your computer and use it in GitHub Desktop.
Using Aloha Editor as RequireJS module /
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load Aloha Editor with require.js</title>
<!-- load the jQuery and require.js libraries -->
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/vendor/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/require.js"></script>
<script>
require({
baseUrl: "scripts"
}, ["scripts/main.js"]);
</script>
<script>
if (window.Aloha === undefined || window.Aloha === null) {
var Aloha = window.Aloha = {};
}
Aloha.settings = {
locale: 'en',
jQuery: jQuery,
repositories: {
linklist: {
data: [
{ name: 'Example', url:'http://example.com', type:'website', weight: 0.50 }
]
}
},
plugins: {
load: 'common/ui, common/format, common/link',
format: {
config : [ 'b', 'i', 'p', 'h1', 'h2', 'h3', 'pre', 'removeFormat' ],
}
}
}
</script>
<!-- load the Aloha Editor CSS styles -->
<link href="/alohaeditor-0.22.x/aloha/css/aloha.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content-editable">
<p>Aloha World. Click to edit.</p>
</div>
<script type="text/javascript">
// using aloha.js
require({
context: 'aloha',
baseUrl: '/alohaeditor-0.22.x/aloha/lib'
}, ['aloha'], function (Aloha) {
Aloha.ready(function () {
Aloha.jQuery('.content-editable').aloha();
});
});
//*/
/*/ using aloha-bare.js
require({
context: 'aloha',
paths: {
aloha: 'aloha-bare'
},
baseUrl: '/alohaeditor-0.22.2/aloha/lib'
}, ['aloha'], function (Aloha) {
Aloha.ready(function () {
Aloha.jQuery('#content-editable').aloha();
});
});
//*/
</script>
</body>
</html>
$.fn.alpha = function() {
return this.append('<p>Alpha: ok</p>');
};
$.fn.beta = function() {
return this.append('<p>Beta: ok</p>');
};
require(["jquery.alpha", "jquery.beta"], function($) {
//the jquery.alpha.js and jquery.beta.js plugins have been loaded.
jQuery(function() {
jQuery('body').alpha().beta();
});
});
@Annakan
Copy link

Annakan commented Sep 1, 2013

How could this work given that with requireJS there is no guaranty that JQuery and JQueryui will be loaded when the Aloha.settings are assigned ?
Is it legual to change the settings after aloha is loaded or should they be set before aloha loading ?
What version of Aloha packaging is implied here ? full ? bare ? "normal" ?

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