Author: Tom McClean
Updated: 26 Jul 2016 21:12
Always looking for a way to make my websites easier to use, today I set out to give Portal CMS the easiest editing of all the content management systems around. To do this I have used the TinyMCE Inline Editing plugin and built it into my Blog Builder and Page Builder.
If you ask most non technical users what they would want when editing a web page, the closest they tend to get to the web paradigm is their use of Microsoft Office. Microsoft Office is quick and easy to use and allows the user to simply type what they want in a way that is easily understood - because they have used these programs for years.
It is hard to recreate the functionality you can get from product like Microsoft Office on a website because the web is stateless. But there are a few really good plugins around online like CKEditor and TinyMCE that give you inline editing which is at least familiar to the user from a user interface perspective. Using these plugins you just click or tap on words and the page immediately but subtly transforms into a word processor.
The difficulty in implementing this functionality is saving the changes made in a efficient and reliable way. When you press refresh on a web page, anything that has not been sent to the server for saving will be lost, and you don't want to make the user wait all the time because you need to save the content to the server because they will get frustrated and leave.
The implementation I have gone with is to allow users not to edit the entire page as you would with a word document, but to edit individual elements, this makes saving a lot less tricky because it doesn't need to save the whole page everytime, it just needs to save the one element you changed.
It also works out positive in another way, because the users can only edit one element at a time - the website can continue to lay out components in a testable way (with regard to the way it reacts in the interface), the user can pick a templated section and easily change its content with the website responding to that change in real time, and saving the changes when desired.
I am pretty happy with the way this functionality worked out so I decided to record a short video showing how the new page editing tools work on Portal CMS. Take a look at it below!