I'm using aloha editor on my project but when I try to use a plugin I have always the same problem:
Aloha-Editor Error: The following module failed to load: css!format/css/format.css
Aloha-Editor Error: The following module failed to load: css!image/css/image.css
Aloha-Editor Error: The following module failed to load: css!image/vendor/ui/ui-lightness/jquery-ui-1.8.10.cropnresize.css
I think I'm missing something but I couldn't find which is the real error, here is part of my code.
<head>
<link rel="stylesheet" href="{{ MEDIA_URL }}aloha_editor/aloha/css/aloha.css" id="aloha-style-include" type="text/css">
<script type="text/javascript" src="/media/jquery.js"></script>
<script type="text/javascript" src="/media/script.js"></script>
<script src="/media/aloha_editor/aloha/lib/aloha.js" data-aloha-plugins="common/format,extra/draganddropfiles,common/image,common/link"></script>
</head>
<body>
<script type="text/javascript">
(function(window,document) {
var
$ = window.jQuery,
GENTICS = window.GENTICS,
$body = $('body');
Aloha.settings = {
logLevels: {'error': true, 'warn': true, 'info': true, 'debug': true},
errorhandling : false,
ribbon: false,
"i18n": {
// let the system detect the users language
"acceptLanguage": '<?=$_SERVER['HTTP_ACCEPT_LANGUAGE']?>'
//"acceptLanguage": 'fr,de-de,de;q=0.8,it;q=0.6,en-us;q=0.7,en;q=0.2'
},
"plugins": {
"format": {
// all elements with no specific configuration get this configuration
config : [ 'b', 'i','sub','sup'],
editables : {
// no formatting allowed for title
'#title' : [ ],
// content is a DIV and has class .article so it gets both buttons
'#content' : [ 'b', 'i', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
}
},
"dragndropfiles": {
config : { 'drop' : {'max_file_size': '200000',
'upload': {//'uploader_class':GENTICS.Aloha.Uploader, //this is the default
'config': {
'url': '/media/images_dragged/',
'extra_headers':{'Accept':'application/json'},
'additional_params': {"location":""},
'www_encoded': false }}}}
},
"table": {
config: ['table']
},
"image": {
config : { 'img': { 'max_width': '50px',
'max_height': '50px' }},
editables : {
'#title' : {},
}
}
}
};
$body.bind('alohaReady',function(){
$('#content').aloha();
});
})(window, document);
</script>
...
...
</body>
You've some issues in your code... eg. to use .aloha() use Aloha.jQuery not your own jQuery version (it's fine to use your jQuery for other stuff), settings need to be initialized before loading Aloha Editor, there's a new/better way to check for Aloha.ready ...
See here for a working example of your code: https://gist.github.com/1993723
All the best, Rene
BTW: you can also use the Aloha Editor forum here: http://getsatisfaction.com/aloha_editor