Aloha Editor is located in: http://alohaeditor-example.local/alohaeditor-0.22.x/aloha/lib/aloha.js
RequireJS (2.0.5) & jQuery (1.7.2) will be loaded directly from http://cdn.aloha-editor.org
Aloha Editor is located in: http://alohaeditor-example.local/alohaeditor-0.22.x/aloha/lib/aloha.js
RequireJS (2.0.5) & jQuery (1.7.2) will be loaded directly from http://cdn.aloha-editor.org
| <!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(); | |
| }); | |
| }); |
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" ?