Mobile site: geen RTE

[Tjolk]

Ik ben voor een reeds langer bestaande site bezig een mobiele variant te maken. Ik ben al een heel eind gekomen, maar loopt vast op het punt van de Rich Text Editor (CKeditor) die ik gebruik voor het invoeren van berichten. De route die ik gebruik is:

1. Gebruiker voer bericht in met RTE
2. Bericht wordt als HTML opgeslagen in de database
3. Bij lezen van berichten wordt de opgeslagen HTML getoond zonder verdere poespas.
4. Bij het bewerken van berichten wordt de opgeslagen HTML door CKeditor weer netjes vertaad naar opmaak.

Erg simpele benadering dus, maar het werkt prima.

Een nadeel waar ik nu echter tegenaan loop is dat er voor zover ik weet en kan googlen geen RTE is die op mobiele browsers werkt. Bij het opvragen van het bericht wordt de HTML dus ook niet verwerkt maar gewoon als tekst in de textarea geplaatst.
Aangezien ik vind dat ik van de gebruikers niet mag verwachten dat ze HTML beheersen en weten hoe ze ermee om moeten gaan, moet ik hier een work-around voor bedenken. Bij nieuwe berichten is het niet zo'n probleem; als dat gewoon als platte tekst wordt opgeslagen en weergegeven is dat prima. Maar bij het bewerken van berichten is het toch wat minder handig: er worden vaak lijsten, kopjes etc. gebruikt en dan heeft HTML echt wel nut (en is ook de reden dat ik een RTE gebruik). Strip_tags() gebruiken lijkt me daarom niet heel handig.

Ik heb verder nog gedacht aan een fallback naar BBcode, maar ook dat vind ik niet echt gebruikersvriendelijk. En dan loop ik een beetje vast. De meest logische manier om dit aan te pakken is toch met een bak javascript de HTML goed weergeven, maar dan ben ik eigenlijk gewoon zelf CKeditor aan het namaken. En als dat niet werkt, waarom zou mijn poging dan wel werken?

Tips zijn dus zeer welkom.

[peterkuli]

Welke mobiele browsers wil je bedienen? Er zit nogal wat verschil tussen WebKit en niet-WebKit browsers.

[mithras]

De meeste mobiele browsers zijn ver in de implementatie van html5. Ondertussen in contenteditable een onderdeel van html5 geworden, kan je daarmee niet aan de slag? Je hebt dan beperkte functies, maar het wijzigen van teksten in een al bestaande tekst moet wel lukken.

[StephanVierkant]

Welke opties wil je allemaal bieden? Ik kan me voorstellen dat Bold/Italic/Underline gemakkelijker is dan kleuren, lettertypes, e.d.

[Verwijderd]

mithras schreef op donderdag 14 april 2011 @ 13:30:
De meeste mobiele browsers zijn ver in de implementatie van html5. Ondertussen in contenteditable een onderdeel van html5 geworden, kan je daarmee niet aan de slag? Je hebt dan beperkte functies, maar het wijzigen van teksten in een al bestaande tekst moet wel lukken.

Het klopt dat je met contentEditable kan werken in mobile browsers. En qua functionaliteiten ben je gewoonweg afhankelijk van wat je erin bouwt.

Misschien interessant om te weten dat alle editors gebruik maken van deze functie (of eigenlijk designMode), maar zet de pagina in een iframe, welke dus niet werkt op een mobiele browser.
Daarnaast is er het probleem dat er teveel javascript en eigen functies worden gebruikt die eigenlijk overbodig zijn (zoals geavanceerde dialogen om een simpele tabel te maken, of afbeeldingen toe te voegen). Wanneer deze versimpeld worden kun je zelfs met een oude Nokia N95 je website bewerken.

Het grootste nadeel op dit moment is het gebruik aan goede documentatie over designMode en contentEditable, en dan met name de verschillen tussen de browsers.

Een goed artikel hierover staat op http://blog.whatwg.org/the-road-to-html-5-contenteditable met onderaan links naar verschillende demo's.

Stephan4kant schreef op donderdag 14 april 2011 @ 14:04:
Welke opties wil je allemaal bieden? Ik kan me voorstellen dat Bold/Italic/Underline gemakkelijker is dan kleuren, lettertypes, e.d.

Deze functies zitten al in de editor-mode van de DOM en kunnen met weinig toepassingen worden gebruikt. Voorbeel: http://www.quirksmode.org/dom/execCommand/

[ Voor 13% gewijzigd door Verwijderd op 14-04-2011 14:08 ]

[Tjolk]

peterkuli schreef op donderdag 14 april 2011 @ 13:18:
Welke mobiele browsers wil je bedienen? Er zit nogal wat verschil tussen WebKit en niet-WebKit browsers.

Tsja, liefst zoveel mogelijk natuurlijk. Ik ben nog redelijk vers in mobiele sites, maar ik wil alles liefst platform-onafhankelijk houden. Ik begin echter al wel door te krijgen dat dit in de mobiele wereld nog veel moeilijker is dan in de "normale" wereld.

mithras schreef op donderdag 14 april 2011 @ 13:30:
De meeste mobiele browsers zijn ver in de implementatie van html5. Ondertussen in contenteditable een onderdeel van html5 geworden, kan je daarmee niet aan de slag? Je hebt dan beperkte functies, maar het wijzigen van teksten in een al bestaande tekst moet wel lukken.

Verwijderd schreef op donderdag 14 april 2011 @ 14:06:
Een goed artikel hierover staat op http://blog.whatwg.org/the-road-to-html-5-contenteditable met onderaan links naar verschillende demo's.

Deze functies zitten al in de editor-mode van de DOM en kunnen met weinig toepassingen worden gebruikt. Voorbeel: http://www.quirksmode.org/dom/execCommand/

Die kende ik nog niet, maar het ziet er verdomd bruikbaar uit!

[Tjolk]

Het werkt een heel eind, maar met één groot nadeel: het toetsenbord in Android komt niet tevoorschijn omdat het element niet als textarea wordt herkend. En als ik het toch als textarea behoud, dan staat daar weer alle HTML code in die ik nu net niet wil tonen maar verwerkt wil zien.

Nog even verder zoeken dus.