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: 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
-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.
View the demo to see how this will work Demo
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.