Allow User Editable Content With CSS

On some CMS systems it allows users to directly edit content on the page so that they can preview the change immediately on screen. The way they do this is with Javascript to change any selected paragraph into a textarea and add the paragraph text into this textarea.

But there is a better way you can do this with just CSS, there is a new CSS property which will allow the user to edit the HTML content on-screen.

This property is -user-modify which will change the element to allow the user to edit the content, this is currently only supported on Webkit and Firefox browsers.

Webkit User Modify

-webkit-user-modify: read-only | read-write | read-write-plaintext-only;

This allows for 3 different values:

• read-only - This is the default and will not allow the user to edit the element
• read-write - This allows the user to write the content
• read-write-plaintext-only - User can overwrite the content but only plain text so if you paste anything in here the formatting will be lost.

Moz User Modify

-moz-user-modify: read-only | read-write | write-only

This also allows three values but they are slightly different.

• read-only - This is the default you can read the content but not write the content.
• read-write - This allows the user to both read and write the content.
• write-only - This will just allow the visitor to write then content.

View the demo to see how this will work

Demo

Use In CMS

The way this can be used in a CMS page is for admin user to preview a page of their content on the real page and not in a text editor. Then allow the admin user to click on a paragraph, you can then add the -user-modify CSS property to the clicked element. When this element loses focus you can grab the changed content and use AJAX to update the database with the new content.