Imagine this scenario. You're a content creator and you just spent the past two hours writing up an in-depth blog post about the hibernation patterns of black bears. But then your browser crashes or you accidentally navigate away and you lose all your work. This is a real and really annoying situation that poorly developed apps can cause.
With TinyMCE powering your CMS though, It's really, really easy to stay on your content team's good side. Back in the code, let's install the autosave plugin. Now in the browser, if we make an edit, but then try to navigate away without saving, we get a nice alert asking if we're sure that we want to leave. But that's not all.
Even if we do leave, we have the ability to restore our changes. Let's configure the editor to autosave our content to local storage. every 10 seconds. This is done with the autosave interval option, and its value is the number of seconds plus the letter S to indicate seconds.
You can also do minutes and so on. We can also configure the key that it's saved with in local storage using the autosave prefix option. By default, it's this string right here, tinymce autosave-path query ID. path in this case is the current URL path, the query is the current URL query string, and ID is the value of the ID attribute we use on the editor component.
To keep things simple, let's update it to just use the ID. Now, in a real app, it would be a simple matter of changing out the ID on the editor to something dynamic per page that you want to edit. Let's just give our simple editor a static ID of my CMS ID. Finally, we can use the use local storage composable from view use to set our value reactive ref to the value from local storage if it exists and default to the page template if it does not.
Let's change some content on the page and then try refreshing. Now our content team surely won't lose hours upon hours of work. The last piece of this equation is creating a way for users to actually commit the changes as saved. That way we don't get the annoying pop-up if we actually intend to save it.
We can leave and go on our merry way. That's easy enough with, of course, another plugin. I'll add the save plugin to the plugins option. We'll add a save button to the toolbar.
And we can also provide a save on save callback function. For our purposes, we'll just console log saved, but you can use this hook to send the content of the page to your backend and save it there. Now let's try making another change, hitting save, and this time when we refresh the page, we don't get the pop-up asking if we're sure we want to leave. Of course, since we're backing everything up to local storage, our changes are once again preserved.
But really, you'll want to use that callback to save them on your server. Imagine this scenario. You're a content creator and you just spent the past two hours writing up an in-depth blog post about the hibernation patterns of black bears. But then your browser crashes or you accidentally navigate away and you lose all your work.
This is a real and really annoying situation that poorly developed apps can cause. With TinyMCE powering your CMS though, It's really, really easy to stay on your content team's good side. Back in the code, let's install the autosave plugin. Now in the browser, if we make an edit, but then try to navigate away without saving, we get a nice alert asking if we're sure that we want to leave.
But that's not all. Even if we do leave, we have the ability to restore our changes. Let's configure the editor to autosave our content to local storage. every 10 seconds.
This is done with the autosave interval option, and its value is the number of seconds plus the letter S to indicate seconds. You can also do minutes and so on. We can also configure the key that it's saved with in local storage using the autosave prefix option. By default, it's this string right here, tinymce autosave-path query ID.
path in this case is the current URL path, the query is the current URL query string, and ID is the value of the ID attribute we use on the editor component. To keep things simple, let's update it to just use the ID. Now, in a real app, it would be a simple matter of changing out the ID on the editor to something dynamic per page that you want to edit. Let's just give our simple editor a static ID of my CMS ID.
Finally, we can use the use local storage composable from view use to set our value reactive ref to the value from local storage if it exists and default to the page template if it does not. Let's change some content on the page and then try refreshing. Now our content team surely won't lose hours upon hours of work. The last piece of this equation is creating a way for users to actually commit the changes as saved.
That way we don't get the annoying pop-up if we actually intend to save it. We can leave and go on our merry way. That's easy enough with, of course, another plugin. I'll add the save plugin to the plugins option.
We'll add a save button to the toolbar. And we can also provide a save on save callback function. For our purposes, we'll just console log saved, but you can use this hook to send the content of the page to your backend and save it there. Now let's try making another change, hitting save, and this time when we refresh the page, we don't get the pop-up asking if we're sure we want to leave.
Of course, since we're backing everything up to local storage, our changes are once again preserved. But really, you'll want to use that callback to save them on your server.