Symphonious

Living in a state of accord.

contentEditable in Mobile WebKit

What Is contentEditable?

JavaScript editors are all fundamentally based on a technology called contentEditable which makes a part of the web page become editable by the user. While there is a lot of functionality that’s usually bundled under the “contentEditable” title, there are a few core parts which are essential for a browser to support correctly1:

  • Selection – allowing the user to position a text caret in the content and select various parts of it.
  • Content entry and deletion – allowing the user to type basic text and to delete selected content.

Without these two key components of contentEditable it’s impossible to create a high-quality, WYSIWYG editor with JavaScript. Despite some variations in how things work, this functionality is available on all common desktop browsers and has been for quite a few years.

The Problem

On mobile WebKit, for both iOS and Android, the basics of contentEditable support aren’t working correctly. The problem is two fold:

  1. While the user can position a text caret and change the selection, the actual caret (the blinking vertical line), never renders so users don’t know where their typing will appear.
  2. The on-screen keyboard doesn’t appear when the caret is placed in an editable section. On devices without a real keyboard it’s then impossible to type.

WebKit is actually surprisingly close to getting this working, with a lot of the underpinning functionality appearing to work but these two issues prevent editors from being usable2.

Why Does It Matter?

While geeks may feel at home writing HTML code by hand or using a markup language like markdown or textile, non-technical users find it significantly easier to use a WYSIWYG editor. Currently, it’s not possible to offer such an editor on mobile devices due to the lack of contentEditable support.

Even worse is that many sites are already using a WYSIWYG editor which then prevents users on a mobile devices from contributing content – even when the rest of the site works perfectly. With mobile browsers improving so rapidly, most sites now work without needing special adjustments so the lack of contentEditable support is one of the few major incompatibilities.

How Might it be Fixed?

To be honest, I don’t know and don’t have the experience with the code involved to find the source of the problem and fix it. However, with both the source to WebKit and Android being open, hopefully someone does have the experience knowledge and a bit of time to solve this.

With WebKit being the browser engine of choice on so many devices, the fix may even flow around to a bunch of mobile OS’s.

Relevant Bug Reports

Android

iPhone

Apple don’t provide a public bug list, but this issue is logged as Radar #8399288. Apple do use the number of bug reports for an issue to adjust priority so if this issue is important to you, please do log an issue and cite Radar #8399288.

Others

I don’t currently have bug reports against other systems but would appreciate pointers to any relevant bugs for other systems (whether they use WebKit or not) so they can be tracked.

1 – The other major component is the execCommand function which provides built-in implementations of a number of common commands like bold, italic, etc. While it’s certainly useful to have these, they can generally be replaced by pure-JavaScript implementations without sacrificing quality or performance.

2 – I’m unaware of any mobile browser that supports contentEditable well enough to make an editor feasible. In fact, WebKit appears to be the closest to that milestone.

Ephox in the IBM Cloud

Ephox EditLive! is now part of the IBM cloud offering on Amazon Web Services. EditLive! OEM edition is bundled in the cloud offering of IBM WCM. This means you can now quickly run up a new instance of IBM’s WCM system on Amazon EC2 and configure it to use EditLive! as the editor.

If you want to take advantage of the extra benefits of the Enterprise Edition (track changes, commenting, accessibility checking, image editing and more), you can install that as normal once the system is running. Currently Ephox doesn’t have per-hour pricing through Amazon but you can contact our sales team so they can discuss the options available.

Alfresco Virtualization Server Not Responding – Unable to Preview Site

If you’ve tried to set up Alfresco 3.2 and use the WCM component, you’ve probably run into one or more1 of these problems:

  1. When you click “Preview Website” you get an unable to connect message.
    • You need to start the virtualization server that provides the previews or configure it’s IP correctly.
  2. When you click “Preview Website” you get a blank page and the browser is “connecting” forever.

    • You did the right thing and entered a root password other than ‘admin’ in the installer and now you’re being punished for it. Go and update the virtualization server configuration and give it the admin password you entered.
  3. When you click “Preview Website” you get a response immediately that just reports “Virtual website not found”.
    • You started the virtualization server too soon after starting Alfresco. Restart it.
  4. When you try to deploy the server it fails to connect.
    • You need to download and install the deployment server.
  5. You’re trying to follow the getting started example, but when you get to creating content from the Press Release Form, it just gives you an error: Cannot resolve the name 'pr:company_footer_choices'.
    • You need to get the virtualization server working. Also make sure you have done the bulk import step and can preview the site.

Starting the Virtualization Server

There should be a ‘virtual_alf.sh’2 script in the Alfresco install directory. Run ‘./virtual_alf.sh start’ There’s also a virtual_start.sh but you’ll probably need to edit it to replace the @@ALF_DIRECTORY@@ placeholder that the installer didn’t replace.

Setting the Admin Password

At the end of the file ‘virtual-tomcat/conf/alfresco-virtserver.properties’ within your Alfresco install directory, there’s a property ‘alfresco.server.password’ this needs to be set to the admin password for your Alfresco instance. Keep this in sync anytime you change the admin password or your site previews will stop working.

Also note that the user/password you add here will be used for all previews so it bypasses any security you might have. Don’t deploy this on a publicly available site unless you have nothing to hide.

Installing the Deployment Server

No, it doesn’t seem to come with Alfresco by default – the documentation suggests there’s a way to enable it but I haven’t found it. Much easier to just download the component separately (from the main download page, go to “Custom Installs”, look under the WCM section and pick the obviously named package that works best for your platform. Install it by unzip/untarring in a directory and run it with the deploy_start.sh script.

There is configuration in the ‘deployment.properties’ file which most importantly controls where it deploys to. You probably want to deploy to a Tomcat server’s webapps directory or similar. The default config will however work for testing and put the deployed content into the ‘target’ directory.

Why Isn’t This in the Install Guide?

I have no idea. It would seem like something you would want to know about while installing.

1 – probably all of them actually

2 – .bat on Windows

Conversion for the Web

Andrew Shebanow in Open Government and PDF:

The issue at hand is not whether governments should pick HTML or PDF. The issue at hand is whether governments are capable of publishing information at all. Show me an HTML creation tool that creates high quality, standards conformant markup from a Word document or any of the zillions of editing tools that government employees use. Now add in all the tools used by people who submit documents to the government. And all the versions of those tools released in the last 20 years. Now make sure that the HTML/XML works correctly even when the user doesn’t have the right browser or the right fonts installed.

I’ve actually worked with a number of government departments who were looking to move more content online and the content conversion problem is definitely a time consuming and challenging part of the problem. That’s precisely why I wind up getting involved, since EditLive! lets you easily copy and paste content from Word documents and produce clean, compliant XHTML. It can even (optionally) strip out inline formatting and leave just the structure like headings, tables and lists.

Furthermore, EditLive! is actually quite good at making sure the HTML works correctly even when the user doesn’t have the right browser or the right fonts installed, especially when it’s been configured to suit the particular content needs. Even with non-technical business authors this can work very well and is doing so for a significant number of government departments.

That’s not to say it’s the whole solution, there are systems out there where it’s hard to convert the content to HTML and where HTML may not be the best format anyway. Some of those cases may work better with PDF but certainly not all of them. To somehow suggest that PDF is a complete and simple solution to publishing information on the web misses quite a lot of the picture. For example:

  • How do web site visitors navigate around and get to that PDF data? How do they search and find it? As much time is spent working out navigation structures as it is converting content.
  • How do you expose information from databases with regularly changing information? Wouldn’t a HTML representation be easier to generate than PDF in most of these cases?

Putting information on the web is not simple and no single technology is going to make it simple. PDF definitely has it’s place on the web, but so does HTML and a number of other formats. PDF doesn’t alleviate compatibility concerns, not all users have a recent enough PDF reader, not all PDF embed all the fonts and when they do it makes the download very large etc and not all PDFs are standards compliant. Putting non-web stuff on the web is always a big, challenging project, so review the available technologies carefully and pick the ones that best achieve your goals. Very few companies have success with just dumping a whole heap of PDFs on a web server.

IBM WCM 6.1.0.2 Remote API Content Creation Problem

I’m stumped so I’m throwing this one out there in the hope that someone might know the answer. I have a JSP component that builds a URL to create a new content item, in a specific site area with a specific authoring template. It works great on Portal 6.0.1.3 and Portal 6.1.0.0 but breaks on 6.1.0.1 and 6.1.0.2. When you go to the URL, it correctly starts creating content but instead of skipping the stage where it asks for an authoring template it just gives a blank list to choose from. If you omit the authoring template from the URL it will correctly list all templates and go on to create the content.

The URL winds up looking like:

http://iweb2.ephox.com:10040/wps/myportal/wcmAuthoring?wcmAuthoringAction=new&
type=com.ibm.workplace.wcm.api.WCM_Content&atid=com.ibm.workplace.wcm.api.WCM_AuthoringTemplate/simple-page/389d16004d3954ac9b4eff0a98a2531c/PUBLISHED&
pid=com.ibm.workplace.wcm.api.WCM_SiteArea/plugins/ca0d04004e034ec59853f8b5e96d1024/PUBLISHED

I’ve verified that the ID for the authoring template is correct by using it in an ‘edit’ action and the authoring template opens in edit mode correctly.

If anyone knows why this is suddenly going wrong I’d love to hear it.