[JS] Feature detection: wel / geen WYSIWYG editor

[Zoefff]

Voor een project maak ik gebruik van jHtmlArea om een wysiwyg editor aan te bieden. Dit werkt helaas niet op de iPhone / iPad of andere webkit based mobiele browsers (Android). Dit zal vast iets te maken hebben met het feit dat de editor stiekem geen textarea gebruikt, maar een iframe waarvan de inhoud aanpasbaar is.

Ik kan clientside met iets als

JavaScript:

navigator.userAgent.match(/ipod|iphone|ipad|android/i)

natuurlijk detecteren of het een van de devices is en dan een normale textarea voorschotelen. Maar in plaats van browserdetection maak ik liever gebruik van featuredetection.

Daarbij loop ik echter tegen een probleem aan. De twee meest voor de hand liggende features waar ik op kan checken, document.designMode en document.body.contentEditable bestaan namelijk gewoon. Logisch, want de iPad rendert de wysiwyg editor ook gewoon, je kan er alleen niets mee.

Heeft iemand een ander idee waarmee ik kan detecteren of het wel of niet mogelijk is om van een wysiwyg editor gebruik te maken? Er is -tegen mijn verwachting in- helaas weinig info over te vinden. Het enige wat ik kan vinden is om met client- of serverside browserdetection wel of geen editor voor te schotelen. Maar dat vind ik de kreupele oplossing

[Verwijderd]

plan: Tweakers.net verbetert mobiele ondersteuning
http://tweakers.net/devicedetect

Met WURFL kan je vast wel 'features' detecteren . Het is geen kreupele oplossing.

[Zoefff]

Dat biedt op het gebied van feature detection helaas weinig soelaas.

XML:

<device id="apple_generic" user_agent="Mozilla/5.0 (iPhone;" fall_back="generic_xhtml">
 <group id="product_info">
   <capability name="mobile_browser" value="Safari"/>
   <capability name="device_os" value="iPhone OS"/>
   <capability name="has_qwerty_keyboard" value="true"/>
   <capability name="pointing_method" value="touchscreen"/>
   <capability name="model_name" value="iPhone"/>
   <capability name="device_claims_web_support" value="true"/>
   <capability name="can_skip_aligned_link_row" value="true"/>
   <capability name="brand_name" value="Apple"/>
   <capability name="release_date" value="2007_june"/>
 </group>
 <group id="markup">
   <capability name="html_web_3_2" value="true"/>
   <capability name="html_wi_oma_xhtmlmp_1_0" value="true"/>
   <capability name="html_wi_w3_xhtmlbasic" value="true"/>
   <capability name="html_wi_imode_compact_generic" value="true"/>
   <capability name="wml_1_1" value="false"/>
   <capability name="preferred_markup" value="html_web_4_0"/>
   <capability name="xhtml_support_level" value="4"/>
   <capability name="html_web_4_0" value="true"/>
 </group>
 <group id="xhtml_ui">
   <capability name="xhtml_supports_css_cell_table_coloring" value="true"/>
   <capability name="xhtml_make_phone_call_string" value="tel:"/>
   <capability name="xhtml_table_support" value="true"/>
   <capability name="xhtml_display_accesskey" value="false"/>
   <capability name="xhtml_supports_iframe" value="full"/>
   <capability name="xhtmlmp_preferred_mime_type" value="application/xhtml+xml"/>
   <capability name="xhtml_format_as_attribute" value="false"/>
   <capability name="xhtml_readable_background_color1" value="#D9EFFF"/>
   <capability name="xhtml_supports_table_for_layout" value="true"/>
   <capability name="xhtml_format_as_css_property" value="true"/>
   <capability name="xhtml_honors_bgcolor" value="true"/>
 </group>
 <group id="image_format">
   <capability name="jpg" value="true"/>
   <capability name="gif" value="true"/>
   <capability name="bmp" value="true"/>
   <capability name="wbmp" value="false"/>
   <capability name="gif_animated" value="true"/>
   <capability name="colors" value="65536"/>
   <capability name="png" value="true"/>
 </group>
 <group id="object_download">
   <capability name="ringtone_voices" value="12"/>
   <capability name="ringtone_mp3" value="true"/>
   <capability name="ringtone_amr" value="true"/>
   <capability name="ringtone_midi_monophonic" value="true"/>
   <capability name="ringtone" value="true"/>
   <capability name="ringtone_wav" value="true"/>
   <capability name="ringtone_midi_polyphonic" value="true"/>
   <capability name="video" value="true"/>
   <capability name="ringtone_aac" value="true"/>
 </group>
 <group id="ajax">
   <capability name="ajax_xhr_type" value="standard"/>
   <capability name="ajax_support_getelementbyid" value="true"/>
   <capability name="ajax_support_event_listener" value="true"/>
   <capability name="ajax_manipulate_dom" value="true"/>
   <capability name="ajax_support_javascript" value="true"/>
   <capability name="ajax_support_inner_html" value="true"/>
   <capability name="ajax_manipulate_css" value="true"/>
   <capability name="ajax_support_events" value="true"/>
 </group>
 <group id="display">
   <capability name="physical_screen_height" value="100"/>
   <capability name="columns" value="20"/>
   <capability name="dual_orientation" value="true"/>
   <capability name="physical_screen_width" value="50"/>
   <capability name="max_image_width" value="300"/>
   <capability name="rows" value="20"/>
   <capability name="resolution_width" value="320"/>
   <capability name="resolution_height" value="480"/>
   <capability name="max_image_height" value="320"/>
 </group>
 <group id="bearer">
   <capability name="wifi" value="true"/>
   <capability name="max_data_rate" value="384"/>
 </group>
 <group id="css">
   <capability name="css_supports_width_as_percentage" value="true"/>
 </group>
 <group id="rss">
   <capability name="rss_support" value="true"/>
 </group>
 <group id="deprecated">
   <capability name="video_acodec_amr" value="true"/>
   <capability name="has_pointing_device" value="true"/>
   <capability name="video_vcodec_mpeg4" value="true"/>
   <capability name="video_vcodec_h264" value="10 1b 11 12"/>
   <capability name="video_3gpp2" value="false"/>
   <capability name="xhtml_supports_file_upload" value="false"/>
   <capability name="video_mp4" value="false"/>
   <capability name="video_3gpp" value="false"/>
   <capability name="video_acodec_aac" value="true"/>
   <capability name="video_vcodec_h263_0" value="true"/>
   <capability name="video_mov" value="true"/>
   <capability name="video_max_frame_rate" value="15"/>
 </group>
 <group id="playback">
   <capability name="playback_vcodec_h264_bp" value="1.2"/>
 </group>
 <group id="storage">
   <capability name="max_deck_size" value="100000"/>
   <capability name="max_url_length_in_requests" value="512"/>
 </group>
 <group id="wml_ui">
   <capability name="wml_make_phone_call_string" value="none"/>
   <capability name="card_title_support" value="false"/>
   <capability name="table_support" value="false"/>
   <capability name="elective_forms_recommended" value="false"/>
   <capability name="menu_with_list_of_links_recommended" value="false"/>
   <capability name="break_list_of_links_with_br_element_recommended" value="false"/>
 </group>
</device>

Volgens mij biedt geen van de hier beschreven properties enig houvast om te bepalen of ik wel of geen gebruik kan maken van editable content. Bovendien ben ik eigenlijk ook op zoek naar een clientside oplossing, en dat is dit natuurlijk niet

[Bosmonster]

Kun je niet beter een editor nemen die dit zelf goed detecteert?

http://tinymce.moxiecode.com/

bijvoorbeeld

Overigens zouden veel features gewoon moeten werken onder Safari mobile, maar zo te zien toch nog weinig die zich daaraan gewaagd hebben.

[ Voor 66% gewijzigd door Bosmonster op 06-05-2010 15:02 ]

[Zoefff]

Ook TinyMCE detecteert het niet goed, getuige http://tinymce.moxiecode.com/punbb/viewtopic.php?id=15954 . Het probleem is volgens mij dat alle functies gewoon in Safari Mobile zitten, maar dat het gebruik ervan niet mogelijk is omdat je geen toetsenbord voorgeschoteld krijgt doordat het geen input / textarea is waar je de focus op legt. Een oplossing daarvoor heb ik echter ook niet kunnen vinden, vandaar dat ik op zoek ben naar een nette manier om de editor niet te initialiseren.

[Verwijderd]

Je kan toch zien dat het een mobiele browser is met WURFL?! Wat is dan nog het probleem?

"<capability name="mobile_browser" value="Safari"/> "

[pieturp]

Benieuwd naar je resultaten

* denkt aan combinatie van iframe en textarea die stiekem toch focus heeft (maar buiten beeld, opacity 0, dat soort dingen) of een eigen 'virtual keyboard'... Beiden lijken niet echt eenvoudig in combinatie met 'contenteditable' en zeker niet zonder issues. Laat staan dat 't je probleem van 't detecteren ermee oplost

[ Voor 5% gewijzigd door pieturp op 06-05-2010 23:34 ]

[Bosmonster]

Zoefff schreef op donderdag 06 mei 2010 @ 15:18:
Ook TinyMCE detecteert het niet goed, getuige http://tinymce.moxiecode.com/punbb/viewtopic.php?id=15954 . Het probleem is volgens mij dat alle functies gewoon in Safari Mobile zitten, maar dat het gebruik ervan niet mogelijk is omdat je geen toetsenbord voorgeschoteld krijgt doordat het geen input / textarea is waar je de focus op legt. Een oplossing daarvoor heb ik echter ook niet kunnen vinden, vandaar dat ik op zoek ben naar een nette manier om de editor niet te initialiseren.

Als ik op de iPhone naar de TinyMCE voorbeelden ga krijg ik gewoon een textarea waar ik in kan typen? Dat is toch een prima fallback?

[Zoefff]

Verwijderd schreef op donderdag 06 mei 2010 @ 18:56:
Je kan toch zien dat het een mobiele browser is met WURFL?! Wat is dan nog het probleem?

"<capability name="mobile_browser" value="Safari"/> "

Ehm, het probleem beschrijf ik toch in de startpost? Browser detectie is inderdaad een eitje zoals ik ook al aangeef. Ik wil echter niet aan de hand van de useragent besluiten om bepaalde dingen wel of niet voor te schotelen, maar aan de hand van de beschikbare features. Mijns inziens een veel betere manier om te bepalen of een client ergens wel of geen ondersteuning voor bied.

Bosmonster schreef op vrijdag 07 mei 2010 @ 09:36:
[...]


Als ik op de iPhone naar de TinyMCE voorbeelden ga krijg ik gewoon een textarea waar ik in kan typen? Dat is toch een prima fallback?

Dat is inderdaad een prima fallback waar ik mee kan leven. Het probleem is echter niet de fallback, maar hoe ik detecteer om die fallback voor te schotelen.

[Zoefff]

Waarschijnlijk gaat dit (feature detection) gewoon niet lukken. Ook getuige deze blogpost:

quote: http://accessgarage.wordp...ake-contenteditable-work/

That said, Mobile WebKit for the iPhone has a major issue. It doesn’t actually support contenteditable at all. Worse, it reports that it does — node.contentEditable and node.isContentEditable are true for a node with the attribute contenteditable=”true”, yet . So if you want a fallback, you have to sniff for the user agent rather than use the technique of capability detection, which is better because you never know which future version will support contenteditable.

Dan dus toch maar browser detection. Kreupel, want in iPhone OS 4.0 beta 2 schijnt contenteditable wél te werken. Zie hier een reden waarom ik dus liever gebruik maak van feature detection

[Bosmonster]

Zoefff schreef op vrijdag 07 mei 2010 @ 12:07:
[...]
Dat is inderdaad een prima fallback waar ik mee kan leven. Het probleem is echter niet de fallback, maar hoe ik detecteer om die fallback voor te schotelen.

Dat doet TinyMCE dus.

Als je die niet wilt gebruiken kun je eens kijken hoe zij het doen.

[Zoefff]

Zij gebruiken dezelfde methode als ik al in de startpost aangeef:

JavaScript:

/**
 * Constant that tells if the current browser is an iPhone or iPad.
 *
 * @property isIDevice
 * @type Boolean
 * @final
 */
t.isIDevice = /(iPad|iPhone)/.test(ua);

Geen featuredetection dus, helaas. Wel een leuke naam, iDevice

[Zoefff]

Mooi om te zien trouwens is dat ze daarmee precies in de valkuil trappen die ik nou juist probeer te vermijden. De laatste versie is in ieder geval nog niet aangepast om Android devices te herkennen, dus op Android devices krijg je keurig een TinyMCE editor voorgeschoteld die het niet doet

[Grijze Vos]

Aangezien het open source is kan iemand dat vast wel zelf aanpassen als dat nodig is.