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
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.