I only tested this in Chrome and Firefox on a Mac, so not sure if it affects windows and linux too, but if you select all using cmd-a (ctrl-a in windows or unix) and then press to clear the selection (or you just start typing), it doesn't just remove all of the contents of the editable, but the editable itself too.

Confirmed on the demo on the aloha homepage (where it doesn't always happen the first time) and on the demos linked from the demos page too. Interestingly enough select-all, backspace doesn't behave the same way.

Asdf

The Ruby CLI (the ./cli file we depend on for our development) should become a ruby gem. Perhaps the name gitr or pjr would be best suited. Who would like to do this?

The benefit of this over the current setup is that the cli is getting out of sync between branches which is causing problems.

Ruby gem instead of a Node.js package is because ruby is much more portable than node, node doesn't work on windows, we require people to be able to develop on windows.

Hi !
It's a reminder primarily for me.

Internet Explorer doesn't like loading Aloha before
It is a best practice as loading it outside of the head loads javascript after showing the HTML and applying CSS to the document.

But Aloha fails in IE (try to move the script tags before the end of the body.

Hi,

out of curiosity and to improve the "perceived performance" of our demo, I tried to preload Aloha 0.9.3 with the asynchronous javascript preloader lab.js. Unfortunately, Aloha failed to initialize and died silently (no logged errors). I just noticed that some dynamically embedded css files failed to load due to a wrong base url:

/css/aloha.css?v=0.9.3
/deps/extjs/resources/css/ext-all.css?v=0.9.3
/deps/extjs/resources/css/xtheme-gray.css?v=0.9.3
/deps/prettyPhoto/resources/css/prettyPhoto.css?v=0.9.3
/plugins/com.gentics.aloha.plugins.Link/css/Link.css?v=0.9.3
/plugins/com.gentics.aloha.plugins.Table/resources/table.css?v=0.9.3
/plugins/com.gentics.aloha.plugins.HighlightEditables/css/HighlightEditables.css?v=0.9.3
/plugins/com.gentics.aloha.plugins.LinkChecker/css/LinkChecker.css?v=0.9.3

I tried to circumvent this by setting GENTICS.Aloha.settings.base to the correct base url, but it seems that my settings were ignored. When I load Aloha via old-school-SCRIPT-tags, everything works fine.

https://github.com/alohaeditor/Aloha-Editor/blob/dev/WebContent/core/repository.js

documentation is ugly - let's move it to markdown. That will offer good rocco support https://github.com/rtomayko/rocco

Hey everyone, so I've been assigned the task of performing several upgrades to the existing build process.

Goals

1. Use google closure for javascript files. [completed]
2. Use yui compressor for css files. [completed]
3. Create the following js files: aloha-deps.js, aloha-plugins.js, aloha-core.js, aloha.js (combined) [completed]
4. Create the following css files: aloha-deps.css, aloha-plugins.css, aloha-core.css, aloha.css (combined) [partially completed]
5. Combine the plugins and the core's language files into one dictionary for each language [not yet started]

Status

It's all going quite well, you can see the current status here:
http://github.com/balupton/Aloha-Editor/tree/newbuilder/build/

CSS Packaging Issue

As we now package all the css files into one file (so plugin css files are merged with the aloha css files into just one css file) we must alter the urls of CSS includes appropriately. For example the following:

background-image: url(images/image-align-none.png)

would be changed in the packaged file to:

background-image: url(./plugins/com.gentics.aloha.plugins.Image/images/image-align-none.png)

Now... This is going to be quite complicated if the CSS files are done as is (as all the plugins include files differently, some use url, some use "", some use import, some use ./, some use ../, some don't use anything). To make this as simple as possible and easiest to maintain and trouble free I have a proposal.

Proposal for CSS Includes

To simplify the build process could all CSS includes in all CSS files in the Aloha Core and Aloha Plugins please include files by ensuring the prefix ./ exists in the include. So for example:

background-image: url(images/image-align-none.png);
# becomes
background-image: url(./images/image-align-none.png);

background-image: url("images/image-align-none.png");
# becomes
background-image: url("./images/image-align-none.png");

background-image: url("../images/image-align-none.png");
# becomes
background-image: url("./../images/image-align-none.png");

@import "css2.css";
# becomes
@import "./css2.css";

@import url(css2.css);
# becomes
@import url(./css2.css);

@import url("css2.css");
# becomes
@import url("./css2.css");

@import url("../css2.css");
# becomes
@import url("./../css2.css");

This will allow me to just have to search for the ./ string to replace in the build process - which is far easier. As I really don't want for the builder to be duplicating syntax of Minify or CSScaffold in the end, the builder should be as simple as possible not an entire framework alternative!

All good? Good :-)

Question about Dictionary Packaging

This could be quite complicated as there is a lot of in-javascript code that relies on the current structure of dictionary files. This should be slated for the 0.9.4 release and NOT the 0.9.3 release.

Comments, Questions, Concerns

Feedback welcome! :-)

The method GENTICS.Aloha.Editable.smartContentChange uses "keyIdentifier" to determine the key pressed, which is not supported in Firefox, according to own experiences and section 3.1 at http://unixpapa.com/js/key.html (at the bottom of section 3.1).

Proposed solution: use event.keyCode

If you agree, I'd propose a patch.

Greets,
Sebastian

Proposal :

Benefits the jQueryUI migration plan to refactor DOM objects from GENTICS to ALOHA and plugins from com.gentics to org.aloha-editor .

• Do the same for the id prefix of elements in the DOM.

advantage :
Namespace consistency for both project name and code.

Charge estimation : 3 working days for core. 1/2 wd per plugin, + tests 1wd (core+plugins).

The plugin The WebContent / plugins / eu.iksproject.plugins.Person does not contain any License/copyright info.

When you click on pin the editable div loses border, although it didn't lose focus. It should either leave the border around div or deactivate editable (and trigger the event)

Please add the support for uploading and inserting images into the WYSIWYG area, like FCKeditor has.

We want a more "tradional" editor experience in our web app, meaning that aloha's editor menu shouldn't float, but always be visible in a separate div above the editable div.

I already realized that aloha's menu doesn't know a "disabled" state, it simply disappears when the user leaves the editable. So I faked that disabled menu by taking a screenshot of the menu and showing it as the background of the "menu div" with lowered opactiy.

Now to my question: how can I force Aloha's floating menu to appear in exactly that div (=
overlaying the fake disabled menu ) when the user re-activates the editable?

Hey Aloha Team,
we are using the Block concept for TYPO3 v5 quite heavily, meaning that we usually have an "element" which contains some static markup, and then again inside this static markup, there is some place where editable markup should be inserted again.

As an example, for the "Block"-Content Element, we currently generate the following markup:

<div data-identity="8d4b5a04-37df-4130-a79f-47954d34f74a" class="f3-typo3-editable"><div contenteditable="false">
    <h1><span contenteditable="true" data-property="headline">[an editable headline]</span></h1>
    <div><div contenteditable="true" data-property="html">[editable content]</div></div>
</div></div>

Now, if you are in the "h1" and press [enter], the following markup is generated:

<div data-identity="8d4b5a04-37df-4130-a79f-47954d34f74a" class="f3-typo3-editable"><div contenteditable="false">
    <h1><span contenteditable="true" data-property="headline">[an editable</span></h1>
    <h1><span contenteditable="true" data-property="headline">headline]</span></h1>
    <div><div contenteditable="true" data-property="html">[editable content]</div></div>
</div></div>

This effectively duplicates the "h1", which is a problem for us. Now the question: is this a bug on our side (i.e. should our markup be different), or could we somehow define that an "enter" inside a "h1" should not have any effect?

Maybe you have better suggestions concerning the HTML we should generate, just let us know :_)

Thanks for any feedback,
Sebastian

Not all dependency files for aloha editor are included within build (/deps)

Missing files:
/deps/.js
/deps/extjs/.js

These files are needed to use aloha-nodeps.js

i like to configure plugins for editables.
initial situation: i have a page with several blocks and different editables.
i like to have the same plugin configuration for all editables with the same css selector.
for example all h1 should be editable but have no formating options.
All p or divs should be editable and and formatable but should not allow to add new header tags and so on.

i start to configure the format plugin and saw that it only allows id's. But we have a dynamic website with dynamic id's and not every tag has is own id. Shouldn't this be css selectors?

my second step was to look at the list plugin and as far as i understood it, it's not possible to configure this plugin for every editable.

so my questions is how his the best way to get editable based plugin configurations for all the different formatting plugins?

I am happy for any hits, tips or discussions :-)

Nils

Currently, one can set the target attribute for Aloha links automatically, by configuring two variables:

GENTICS.Aloha.Link.targetregex
GENTICS.Aloha.Link.target

This configurability isn't feasible for Aloha editors, that want to decide on a case-by-case basis, whether a link should open in a new window.

Hello guys,

I'm trying to set the focus to Aloha correctly (no directly at the position 0 of the editor).
I want to add a .focus() feature to editable.js.

The solution I use at the moment is jQuery's .focus() but it position the carret at the very begining of the editor.
What I want to do is position the carret inside the first node in the editor.
So that a user that types directly when the editor is opened and focused won't be outside any markup.

Any idea ?

We should add all call that come before AE is ready to a stack and reinvoke when AE is ready. This reduces mistakes of devs and allows AE to be loaded at the end of a doc.

I like the yellow border being shown around editable objects when my mouse hovers over the object. But when I mouse over to other areas of the page (far away from the editable object) the yellow borders show anyway. Very annoying.

How can I disable that?

Thanks.

On my page I have multiple Aloha instances shown, and I'm subscribing to the editableActivated and editableDeactivated events. In normal use the events work as expected (when I click into an editable element I get editableActivated, when I click out of it, I get editableDeactivated).

However, when I call mahalo() for all the Aloha instances, I get an enableDeactivated event for each. This is misleading as the same event is used for two purposes (user deactivates editable, and Aloha instance is destroyed). Instead, mahalo() should raise a editableDestroyed event.

When formatting a headline the whole paragraph is converted to a HX tag.

Instead the selector should select the whole P (or other block) tag only if there is no BR tag inside. If there is a BR tag the content between 2 BR tag should be selected.

The idea is simple, translation files should be converted into js files when aloha is "compiled".

The reason is that these files could be simply loaded from a CDN without the need of a "proxy" technique.

Do you think it's possible ?

I'm currently working on a new cli for Aloha Editor which will make it easier for developers to work with Aloha Editor.

Refer to this gist for the new documentation page, the cli script and a todo of what needs to be done before this is incorporated into aloha:
https://gist.github.com/831278

When moving an image that's wrapped in an a-tag, the image duplicates and creates empty a-tags.

Found in the "wordpress" demo, using firefox 3.6 on os x.

Currently Aloha uses the jQuery Cookie plugin for storing state (toolbar pinning, selected tab etc). If a browser supports HTML5 sessionStorage, then it would be cleaner to use that for such state information.

Where can I find the commercial software license?

I very much love Aloha editor from its first look, and would like to incorporate it into my CMS. Now if the price is not too high, I'm very much willing to use it! :-)

edit: I found it here: http://aloha-editor.com/license.php. There should be a link from the readme though ;-)

What if Aloha used a custom vendored version of jQuery? This way someone can use aloha on a site that uses a different version of jQuery.

I think this should not be too hard. Using noConflict:

alohaQuery = jQuery.noConflict(true);

Then just wrap the entire alohaScript with:

(function(jQuery) {

  // aloha code here

})(alohaQuery);

Would this be supported? I know it might make the codebase slightly larger if jQuery is included twice, but the compatibility benefits would be hugely beneficial to a lot of people. And aloha is typically used on admin tools only so the size shouldn't make a huge difference.

Let me know what you think, I would be happy to post a patch.

Latest Aloha stable release on Chromium 6, when you add preformatted content (<pre>) as the last item of an editable, it is impossible to add any elements of other types afterwards. Adding new lines, selecting them and switching to paragraph changes the whole pre instead of the selection.

It should be possible to limit the number of characters for an editable.

Currently, the CSS files cannot be merged as it is a too complicated task for ANT alone (as the includes in the css files (such as imports, or image links) will break if compiled into one file). As such we will have to use an external bundler script.

In my own CMS, I have created a PHP bundler that utilises Closure for javascript files, and Scaffold for CSS files. If no one has the objections, I'd like to move the CSS compilation into a PHP script that utilises Scaffold.

Scaffold's github page:
https://github.com/balupton/Scaffold

I managed to reproduce an annoying bug pointed by some of our users.
I used Firefox 3.6.13 to make it happen.

First, open the Aloha Documents example.
Put your cursor at the end of a paragraph, press enter and type a word.
Select that word, make it become a heading 1 via the floating menu, put your cursor at the end of the heading 1 and press enter.
The new line is now a heading 1 instead of a simple paragraph.

Do you have some ideas where this bug could come from ?

I would like to see the test application and the unit tests published and made open source.
This would help to improve quality and make it possible to write standard tests for plugin developers and other contributers.

Thanks in advance,

Florian

When placing the cursor in a word and pressing e.g. the "bold" button the single word should get the wanted format (without selecting the word). This works great for words with standard characters, but if the word contains special characters like german umlauts or other characters (also tested with cyrillic characters) it fails. I guess the problem lies in the function GENTICS.Utils.Dom.prototype.searchWordBoundary.

Undo support would be a very nice feature. Real (or "proper") undo/redo would require every action that changes content to become an "edit action" object that can be applied or un-applied, but that would be very difficult and a lot of work. (it would make things easily unit-testable, though)

In the meantime it should be easy to add some kind of "snapshot" feature that runs periodically (every few seconds) or can be triggered manually (when a plugin is about to do something big). Even just a few undo-steps would be nice, so not too many copies of the html will have to be kept around. It should also be easy to not take a snapshot if nothing changed.

This will at least allow users to undo big accidental destructive edits like when you paste the wrong text, for example.

Aloha's init() method, which is called on document.ready has a hardcoded browser support check which throws an alert("Sorry, your browser is not supported at the moment.").

This is bad because it is thrown on every page load where Aloha JS files are included. It would be better if Aloha declined to load gracefully.

Instead of checking for specific user agents, it would in general be better to check for browser capabilities, for example using the Modernizr library (http://www.modernizr.com/). Though, it should be noted that Mobile Webkit inability to edit with contentEditable is on their "undetectables" list.

VIE demos use Aloha loaded from aloha-editor.org. However, the localizations don't work because Aloha website doesn't allow cross-domain XmlHttpRequests. Add this to server response headers for Aloha:

Access-Control-Allow-Origin: *

With the current setup we get a lot of:

XMLHttpRequest cannot load http://aloha-editor.org/aloha-0.9.3/aloha/i18n/en.dict. Origin null is not allowed by Access-Control-Allow-Origin.
GENTICS.Aloha: Error while getting dictionary file http://aloha-editor.org/aloha-0.9.3/aloha/i18n/en.dict: server returned null

The latest closure changes break the window.$ variable in the global environment.

So that any call to the $ which is not put in a closure fail.

It would be nice to be able to define the "title" attribute for links in an Aloha editable. The "title" attribute is a global attribute, so it would make sense to find a general solution:

http://www.w3.org/TR/html5/elements.html#the-title-attribute

When selecting the whole content of an editable in firefox the "Del" or "Backspace" key won't delete the contents. Just selecting some text within the editable will work though.

Currently Aloha doesn't provide an event for when contents of an Editable have been changed.

My use case for such event subscription would be:

• Cache contents into HTML5 LocalStorage to safeguard against browser crashes (never lose content!)
• Enable a Save button in the CMS UI only when something has actually been changed

A lot of people are now trying to implement Aloha Editor with javascript packaging scripts - and thus failing due to the messy ExtJS dependency.

Regardless, we should make ensure that all of our code passes the JSHint quality:
http://jshint.com/

The Aloha Editor JS-files include the text "Licensed unter the terms of http://www.aloha-editor.com/license.html"

This is at least unusual. Better include explicit references to the license(s).

See also: http://www.gnu.org/licenses/gpl-howto.html

Betreff: Bug Found in Aloha Editor.
Datum: Thu, 23 Sep 2010 02:55:44 -0400
Von: Rich Schwab

Hello,
I found a bug by doing the following in Safari 5.0.1 6553.17.8:

1. Making a
   editable rather than a div.
   • Removing all of the text and pressing Backspace.
   • Safari crashes.

I was suprised to read this:

"This software or sourcecode ... may not be copied, otherwise distributed (especially forwarded to third parties), reproduced and combined with other code without our express prior written consent. The software or source code and the concepts it is based upon are to be kept confidential towards third parties. The software or sourcecode may be used solely for the purpose of evaluating and testing purposes for a time of one month from the first submission of the software or source code. In case no arrangements about further use can be reached, the software or sourcecode has to be deleted.
Copyright(C) 2010 Gentics Software GmbH"

I am trying to add a button that will add a label to the content editable page. I have copied the product plugin and replicated:
...
{ id: 1, name: "SubjectPropertyAddress1", url: "/resources/kuota-kueen-k.jpg", type: "product" },

{ id: 2, name: "SubjectPropertyAddress2", url: "/resources/2xu-wetsuit.jpg", type: "product" },

{ id: 3, name: "SubjectPropertyAddress3", url: "/resources/asics-noosa.jpg", type: "product" }

however whenever I remove the url change the type: 'product' to 'somethingelse' for some reason the product menu cannot seem to find the product. Ideally I would like:

{ id: "field1", name: "SubjectPropertyAddress1", type: "custom" },

{ id: "field2", name: "SubjectPropertyAddress2", type: "special" },

{ id: "field3", name: "SubjectPropertyAddress3", type: "reportfield" }

is this possible?

I know that this feature request is a bit radical, but I propose to get rid of the ext.js dependency.

Why get rid of ExtJs? The first reason is to reduce the size of the script includes... The already minified aloha.js is 1 MB in size. The second reason are extjs' license terms. If I want to use Aloha in a commercial project, I need to buy a license for Aloha plus a license for ExtJs. This certainly narrows Aloha's attractiveness compared to TinyMCE et al, which require none or one license purchase.

I know that this will be a long-term goal, especially because some replacement for ExtJS' UI functionality has to be found. But IMHO it is certainly worth a discussion on the upcoming Aloha Hackathon

When editing a page with empty Editables in Firefox, the Editables will be shrinked to 0px height, which makes activation by clicking on them impossible. However, tabbing into the Editables will work fine.

The builder for Aloha Editor is now its own npm package, and thus a standalone project from Aloha Editor.

Please direct any support queries regarding builder improvements to its new home here:
https://github.com/balupton/buildr