Aloha editor contenteditable useable
-
date post
21-Oct-2014 -
Category
Technology
-
view
15.602 -
download
0
description
Transcript of Aloha editor contenteditable useable
![Page 1: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/1.jpg)
![Page 2: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/2.jpg)
content rocks
![Page 3: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/3.jpg)
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
![Page 4: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/4.jpg)
content is text.
![Page 5: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/5.jpg)
and images and formatting... and more
![Page 6: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/6.jpg)
How are more than200 billion pages produced ?
![Page 7: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/7.jpg)
content production
![Page 8: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/8.jpg)
content formating
![Page 9: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/9.jpg)
...or worse
![Page 10: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/10.jpg)
![Page 11: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/11.jpg)
![Page 12: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/12.jpg)
![Page 13: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/13.jpg)
Wordpress 3.0what you see is what you realy get
![Page 14: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/14.jpg)
it’s not!
![Page 15: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/15.jpg)
is web content live editable?
![Page 16: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/16.jpg)
smart guy
![Page 17: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/17.jpg)
![Page 18: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/18.jpg)
![Page 19: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/19.jpg)
cool, browsers can do that!
![Page 20: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/20.jpg)
but what they actualy do
![Page 21: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/21.jpg)
We have a Vision
![Page 22: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/22.jpg)
No Markup!
![Page 23: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/23.jpg)
No reload!
![Page 24: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/24.jpg)
No iframe!
![Page 25: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/25.jpg)
No menu rubbish!
![Page 26: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/26.jpg)
No browser crap!
![Page 27: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/27.jpg)
just edit
![Page 28: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/28.jpg)
✓click and edit everywhere in the website✓see what you do when you do it✓drag & drop Images
just edit
the writer
![Page 29: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/29.jpg)
✓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
![Page 30: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/30.jpg)
![Page 31: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/31.jpg)
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
![Page 32: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/32.jpg)
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.
![Page 33: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/33.jpg)
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.
![Page 34: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/34.jpg)
Design & function preview
![Page 35: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/35.jpg)
![Page 36: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/36.jpg)
![Page 37: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/37.jpg)
![Page 38: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/38.jpg)
![Page 39: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/39.jpg)
![Page 40: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/40.jpg)
![Page 41: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/41.jpg)
![Page 42: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/42.jpg)
![Page 43: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/43.jpg)
![Page 44: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/44.jpg)
![Page 45: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/45.jpg)
![Page 46: Aloha editor contenteditable useable](https://reader034.fdocuments.in/reader034/viewer/2022051207/5446e7ecafaf9f69178b47a7/html5/thumbnails/46.jpg)
Beta available soon
Thanks.http://twitter.com/draftkraft
http://gentics.com