Aloha editor contenteditable useable

content rocks

there is a lot of content around

more than 200 billion content pages*

* http://royal.pingdom.com/2010/01/22/internet-2009-in-numbers/ says 234 million websites per 1000 pages per site

content is text.

and images and formatting... and more

How are more than200 billion pages produced ?

content production

content formating

...or worse

Wordpress 3.0what you see is what you realy get

it’s not!

is web content live editable?

smart guy

cool, browsers can do that!

but what they actualy do

We have a Vision

No Markup!

No reload!

No iframe!

No menu rubbish!

No browser crap!

just edit

✓click and edit everywhere in the website✓see what you do when you do it✓drag & drop Images

just edit

the writer

✓cross browser xHTML 5 Markup✓easy to integrate in any App✓edit floating text around non editables

just edit

the developer

and a lot more

Technologyrequirements for Aloha

■ defined formattings are stored in HTML Markup.

■ HTML5 (if browser does not support 4.01 compatible)

■ any produced content has to be xhtml1.1 compatible

■ Plugins do everything(!), the core is small

■ All characters and languages are supported

■ any state of the cursor or selection is defined

■ any function and the output are predictable

content handlingCursor navigation and Selection

Navigation and selection as well as all formatting options should behave like the common office suites.. "MS Word shortcuts" Alle shortcuts have to be customizable and internationalizable.

Writing in paragraphes■ [Enter]

produces a paragraph (p)■ Shift+Enter

produces a line break (br)■ Strg+Enter

produces a line divider (hr)

FormattingsAll HTML Elements from HTML 5 Chapter. 4.5, 4.6, 4.7. The implementation has to be 'HTML 4.01' Kap. 9, 10, 12 compatible.

Formats■ Überschriften (h1-h6)■ feste Schriftbreite und unformatiert (pre)■ Titel einer Arbeit, Buch, Theater, etc. (cite)■ Zitatabsatz (blockquote)■ Zitatsatz (q)■ Kursiv (i)■ Fett (b)■ Abkürzungen (abbr)■ Programmcode (code)■ Hoch- und Tiefstellen (sub/sup)■ Durchgestrichen (span class=gtx-line-through)

ListsListen und Aufzählungen sollen wie bei Word funktionieren.■ Aufzählung (ol)■ Unsortiert (ul)

TablesGanz einfache Tabellen sollen machbar sein. (siehe mindmap)

Link (a)If you enter a link the Aloha recognizes the link and may suggest the user link name as teh title of the link target.

content handlingCopy / Paste

In einem Fließtextfeld kann mittels Paste Inhalt eingefügt werden. Der eingefügt Inhalt soll so gut wie möglich verstanden und umgesetzt werden. Plugins sollen die Inhalte verarbeiten können. So soll z.B. eine kopierte Tabelle aus Excel automatisch als Tabelle eingefügt werden. Falls ein Link eingefügt wird soll ähnlich wie bei Facebook Zusatzinformationen angezeigt werden können.

An jeder Stelle sollen Blöcke kopiert werden können und an einer anderen beliebigen Stelle wieder eingefügt werden können.

Undo / RedoDurchgeführte Bearbeitungsschritte können Rückgängig gemacht werden. In diesem Zusammenhang ist zu prüfen, ob die browserseitigen Undo-Funktionalitäten alle Anwendungsfälle abdecken, die gewünscht werden. Insbesondere bei Bearbeitungsschritten, wie dem Verändern von Bildgrößen (also serverseitigem Resizing) kann es zu unvorhergesehenen Ergebnissen kommen, wenn ausschließlich die Undo-Funktion des Browsers verwendet wird.

Search and replaceDer Shortcut Strg + F (andere Möglichkeiten von Word checken, wie z.B. Strg + H) öffnet die Suchen & Ersetzen Panel im Sidebar, und setzt den Focus auf das Suchfeld. Mit der Enter-Taste wird die Suche abgesetzt, und das erste Suchergebnis markiert (Range). Mit jedem weiteren Druck auf die Enter-Taste oder den Suchen Button wird das nächste Vorkommen markiert. Die Suche verläuft über die aktive Textbox, und ist nicht verfügbar, wenn keine Textbox aktiviert ist.

Das Ersetzen-Feld ermöglicht einen Text zu definieren, gegen den der Suchbegriff ersetzt wird. Leertext ist erlaubt. Es gibt die Möglichkeit global oder schrittweise zu ersetzen.

Eine mögliche Ausbaustufe der Suchfunktion ist die Suche analog zu Safari/Chrome zu gestalten, also alle gefundenen Begriffe bei Absetzen der Suche zu markieren, den obersten besonders hervor zu heben, und bei weiterer Betätigung des Suchen-Buttons nachfolgend alle Ergebnisse durch besondere Hervorhebung zu kennzeichnen.

SpellingFür das Bearbeiten von Inhalten - egal ob im "Live"-Modus oder als Formular - können verpflichtende Blöcke definiert werden, die mit einer Regular Expression und dazu passender, internationalisierter Fehlermeldung versehen werden. Der Editor verhindert bei inkorrekt ausgefüllten Inhalten die Veröffentlichung des Inhaltes, und signalisiert den Fehler über die Message line.

Design & function preview

Beta available soon

Thanks.http://twitter.com/draftkraft

http://gentics.com