Allow User Editable Content With CSS
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.
Gain access to all tutorials
- Premium tutorials covering WordPress, Laravel and VueJS
- Download premium content
- Download premium WordPress plugins
- Only $5 a month
Join the weekly newsletter
Sign up for our newsletter. You'll be updated on new tutorials as they come available.