Aloha-Editor
Aloha Editor is a JavaScript content editing library
Aloha Editor
I'm using Aloha Editor in a Ruby on Rails application for my client, and i have many issues with the pasting plugin.
Copying text from a webpage or MS Word, and i pasting it makes the script freeze, and Firefox tells me that "the script is not responding".
It doesn't happen when i paste a single line of text.
This is my configuration file for Aloha : http://pastie.org/private/uhffpep12x53p27d1zibqg
Do you know how I can solve this issue ?
Thanks
Source: (StackOverflow)
I am using aloha editor 2 in my project. Everything works fine but I am not seeing how to add/show toolbars so that I can bold or add a table in my page. I see there documentation and learned this things can be done programmatically but in aloha editor 1 there was an option to add a toolbar.
Was wondaring, if aloha editor removed the toolbar option or I can show toolbar in aloha editor 2 like aloha editor 1.
Source: (StackOverflow)
When aloha-editor package is added to meteor project, it starts showing console errors on load:
Uncaught Error: Mismatched anonymous define() module: function () { return Spinner }
http://requirejs.org/docs/errors.html#mismatch
It seems there is a conflict with RequireJS which is used by aloha-editor.
Given link for resolution doesn't help, it contains something about using RequireJS Optimizer, however I have no idea what does it mean exactly.
Does anyone know how exactly this error can be fixed?
Source: (StackOverflow)
Is there a way to disable the ExtJS toolbar from Aloha Editor? I mean, like sidebar way:
Aloha.settings =
modules: ['aloha', 'aloha/jquery']
editables: '.editable'
jQuery: $
sidebar:
disabled: true
toolbar:
disabled: true # does not work
My goal was to let user only use hotKeys to fire formating events inside contenteditable, I really like the core of aloha editor, but this toolbar is really annoying. I`m new with wysiwyg, after search a lot of lightweight plugins with sanitize feature, undo history and contenteditable instead of iframes, aloha was the only one who brought me that.
So, what should I do to accomplish those hotKeys with hidden toolbar?
Source: (StackOverflow)
Accoriding to the Aloha Editor docs you can listen for the "aloha-smart-content-changed" event for help in, say, saving the data to whatever persistence mechanism you are using. Here is an example of what I am trying to do:
<html>
<head>
<title>Aloha Event Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.aloha-editor.org/current/lib/aloha.js" data-aloha-plugins="common/format, common/list, common/link, common/highlighteditables"></script>
<link rel='nofollow' href="http://cdn.aloha-editor.org/current/css/aloha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
});
$(document).ready(function() {
$('.editable').bind('aloha-smart-content-changed', function() {
console.log('Aloha smart event handled.');
});
});
</script>
</head>
<body>
<div class="editable"></div>
</body>
</html>
But the handler never fires. Would anyone that has worked with Aloha know how to properly listen for the event?
Source: (StackOverflow)
I need the Aloha editor to be pinned to a specific position instead of bouncing around all over the page.
Is there a configuration option for that? There is an "append" option for configuring Aloha but I can't figure out how to apply or even if it would solve my problem...
Also open to hacks for overriding the position if there isn't a configuration option.
Source: (StackOverflow)
The Aloha Editor ships with an image plugin that enables users to edit images inline. However, i've not found a way to delete an image in the editor. I'm on a Mac, and i've tried:
- Press Backspace when the image is selected
- Press Backspace wehn the cursor is in front of the image
There's also no "delete image" button in the floating toolbar.
Has anyone found a way to delete an inline image?
Source: (StackOverflow)
I have a dokuwiki wiki set up on my server, and I would love to be able to edit the wiki with inline editing, a la Aloha Editor or Hallo Editor. On the Aloha editor home page they mention that you could use it for wikis in passing, but there are no more details.
I know I could go through all the work of implementing Aloha or Hallo or another similar editor with my dokuwiki setup, but I guess what I'm really wondering is if anyone has already done this with any wiki (dokuwiki or something else).
The end result I'm looking for is: you go to a wiki page, click on the content, edit it in place with Aloha editor or the like, and the new content is saved back to the server. It would allow creating new wiki pages by inserting links to the not-yet-created page (either by clicking the link button or by typing, e.g. [[new-page-link]].
Does this exist in some form somewhere?
Thanks!
Source: (StackOverflow)
I'm using Aloha editor for editing content on a website powered by PHP and MySQL. It's working fine, but I need to be able to insert images/pictures. I found an Aloha editor plugin for that. Here are some links:
There is an example in the first link. However, I can't get the plugin running on the latest version of Aloha editor and jQuery. It fails to load and Chrome says:
image.js:30 Uncaught TypeError: Cannot read property 'fn' of undefined
I have no bloody clue what this means.
Ideally, the user should be able to select an image from a list of images that are on the server. These are located in a single directory and also have a MySQL table for them. I suspect this is where the repository comes in, but I wasn't able to understand how to implement that.
Has anyone had any luck using this plugin in Aloha editor, or found any other ways of inserting images?
Source: (StackOverflow)
I've followed the instructions how to "install" aloha editor as described in aloha-editor.org.
Aloha editor is loaded (as you can see in the photo) but not correctly
You can see the foto here:
this is some javascript i used:
<head>
<script type="text/javascript" src="lib/js/jquery-1.7.1.min.js"></script>
<script
src="aloha/lib/aloha.js"
data-aloha-plugins="common/format,common/list" >
</script>
<script type="text/javascript">
Aloha.ready( function() {
Aloha.jQuery('#content').aloha();
});
</script>
</head>
Source: (StackOverflow)
I'm struggling with customizing the Aloha Editor. I'd like to remove the yellow borders around the editable content:
In Github, the same question was asked, and the answer given was,
the highlight plugin shows the user editable areas when he moves the
mouse. If you don’t want to use it just don’t include. Or do your own
highlight plugin...
However, I don't believe that I'm including the highlight plugin. My Aloha settings looks like this:
Aloha.settings = {
locale: 'en',
plugins: {
format: {
config: [ 'b', 'i', 'sub', 'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
editables : {
'#title' : [ ] // no formatting allowed for title
}
}
},
sidebar: {
disabled: true
}
};
Any suggestions?
Source: (StackOverflow)
I try to deploy my rails 3.1 application with capistrano but it fails with following output:
rake aborted!
File name too long - /srv/good2go.ch/cookbook/releases/20110727063856/tmp/cache/assets/sprockets%2Fsrv%2Fgood2go.ch%2Fcookbook%2Fshared%2Fbundle%2Fruby%2F1.9.1%2Fgems%2Faloha_rails-0.1.4%2Flib%2Fassets%2Fjavascripts%2Faloha%2Fplugins%2Fcom.gentics.aloha.plugins.HighlightEditables%2Fcss%2FHighlightEditables.css%3Asource20110727-2736-dx9guk.lock
Tasks: TOP => assets:precompile
It's this task who fails: RAILS_ENV=production rake assets:precompile
Anyone an idea what it could be?
Source: (StackOverflow)
Is there any real help out there on how to extend the aloha editor?
What I am trying to do is extend their floating menu- I want to add a drop down list with custom fields.
For instance, if a user selects a custom field then a label is added into the html and something like: <special_field> appears inside the content editable.
Update: my code for the initialization part of the plugin so far...
EXAMPLE.Product.init = function() {
var that = this;
// floating menu "Insert template field"-button
var insertButton = new GENTICS.Aloha.ui.Button({
label: 'template field',
'size': 'small',
'onclick': function() {
that.insertfield();
},
'tooltip': this.i18n('button.insertfield'),
'toggle': false
});
GENTICS.Aloha.FloatingMenu.addButton(
'GENTICS.Aloha.continuoustext',
insertButton,
GENTICS.Aloha.i18n(GENTICS.Aloha, 'floatingmenu.tab.insert'),
2
);
// product scope & product attribute field
GENTICS.Aloha.FloatingMenu.createScope(this.getUID('product'), 'GENTICS.Aloha.global');
this.productField = new GENTICS.Aloha.ui.AttributeField();
//style for the drop down that appears when user searches for a fieldname
this.productField.setTemplate('<span><b>{name}</b>' +
'<br class="clear" /><i>{type}</i></span>');
// set the type of field that are allowed to be visible of field search
this.productField.setObjectTypeFilter(['specialfield','systemfield']);
this.productField.setDisplayField('name');
GENTICS.Aloha.FloatingMenu.addButton(
this.getUID('product'),
this.productField,
this.i18n('floatingmenu.tab.specialfield'),
1
);
// handle event as soon as a product block is clicked
GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'selectionChanged', function(event, rangeObject) {
var foundMarkup = that.findProduct(rangeObject);
jQuery('.product-selected').removeClass('product-selected');
if (foundMarkup.length != 0) {
GENTICS.Aloha.FloatingMenu.setScope(that.getUID('product'));
that.productField.setTargetObject(foundMarkup, 'data-field-name');
foundMarkup.addClass('product-selected');
}
// re-layout the Floating Menu
GENTICS.Aloha.FloatingMenu.doLayout();
});
GENTICS.Aloha.EventRegistry.subscribe(
GENTICS.Aloha,
"editableDeactivated",
function(jEvent, aEvent) {
jQuery('.product-selected').removeClass('product-selected');
}
);
This only adds one field to the editor, then I must click on the field itself to change it to the correct field type.
Update2: my latest code is: (with screenshot below)
/**
* insert a template field at the cursor position
*/
function SetupButton(button) {
var scope = 'GENTICS.Aloha.continuoustext';
var definefield = '<label class="ui-specialfield" data-field-name="{0}" data-field-type="{1}" contentEditable="false">[{2}]</label>';
// floating menu "Insert template field"-button
var insertButton = new GENTICS.Aloha.ui.Button({
label: button.Name.substring(0, 11), //truncate fields to enable easy viewing for now
size: 'small',
onclick: function() {
console.debug(" field: " + button);
var range = GENTICS.Aloha.Selection.getRangeObject();
definefield = definefield.replace("{0}", button.Name);
definefield = definefield.replace("{1}", button.Type);
definefield = definefield.replace("{2}", button.Name);
var newTemplate = jQuery(definefield);
GENTICS.Utils.Dom.insertIntoDOM(newTemplate, range, jQuery(GENTICS.Aloha.activeEditable.obj));
range.startContainer = range.endContainer = newTemplate.contents().get(0);
range.select();
},
tooltip: button.Name,
toggle: false
});
switch (button.Type) {
case "sfield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
case "pfield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
case "afield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
case "cfield":
GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
break;
default:
break;
}
}
I will look into your code reply as soon as I can with updated code...
As you can see the buttons overflow...
something else you may notice is the pin cannot be seen clearly if there are many tabs...
Source: (StackOverflow)
I would like to apply class to block element with Aloha editor. Core Aloha editor can apply block elements like p, h1, h2, h3. Is there plugin that could add predefined custom classes to those block elements, like p.smaller or h2.crazy, so that result HTML is something like <h2 class="crazy">Loko headline here<h2>?
Source: (StackOverflow)
Is there a way of using jquery to listen to an event live and check that a special character has been inserted on the page with Aloha editor and jquery will set this special character to an inline style of
font-family: FontAwesome
For instance, I am using Aloha editor and when I insert a special character (which is a "tick"), the editor insert the special character and uses the body font family but this special character needs to be set to font-family: FontAwesome which converts the special character to a tick like this one: 
So at present when I insert the special character it looks like [] instead of the "tick".
I don't know if this will add any additional information but the character picker plugin settings that I use for the configuration in Aloha Editor:
characterpicker: {
// this is the global setting
config: [''],
editables: {
// this will disable the characterpicker for the header
// '#header': '',
// allow more characters for editables with class 'article'
// '.aloha-editable': ['&','"','¢','€','£','¥','']
}
},
Thanks :)
Source: (StackOverflow)