Allow User Editable Content With CSS
Allow User Editable Content With CSS
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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
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.
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Published at DZone with permission of Paul Underwood , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}