I'm trying to implement auto-saving of form content whenever a form field loses focus or the data is changed. I've added the plugin and updated the config but it still doesn't work.
Have I missed something?Configtoolbar: [ { name: "basicstyles", items: ["Bold", "Italic", "Underline"] }, { name: "paragraph",items: ["JustifyLeft","JustifyCenter","JustifyRight","NumberedList","BulletedList"]}, { name: "links", items: ["Link", "Unlink"] }, { name: "insert", items: ["Image", "Table"] }, { name: "colors", items: ["TextColor", "BGColor"]}],disableNativeSpellChecker: false,extraPlugins: 'autogrow,save',autoGrow_minHeight: 200,autoGrow_maxHeight: 1200,autoGrow_bottomSpace: 50,removePlugins: 'resize'
Hi @Tim Kempton ,
I don't think you implemented the right plugin. Based on the documentation you need the Autosave plugin: AutoSave Plugin .
Hi Mihai, I think you're right. I've implemented the correct one but it doesn't appear to work. How does it know how to save, to I have to provide it a server action or something similar?
Hi,
You can provide your own configuration for the plugin.
I see in your initial config you have extraPlugins: 'autogrow,save', but in the plugin documentation you need to reference the plugin as 'autosave', so your new config should be: config.extraPlugins = 'autogrow,autosave';
Secondly, you need to reference correctly in the folder, your path should be:
ckeditor/plugins/autosave
You have the rest of configurations details in the link from my initial response.( https://ckeditor.com/cke4/addon/autosave )
If you need more help with the implementation let me know.
Yeah, I changed the config and can see they are available in chrome dev tools, but what I don't understand is how so it actually save. Looking at the code it appears to save it to local storage.
Yes, it stores the content using HTML5 LocalStorage. If your use case requires it, you’ll need to retrieve the content from LocalStorage and then save it into your database.
First, you need to identify the key, or override it in your configuration. For example, from the documentation:
Next, retrieve the content from localStorage and pass it to your save action. You can find more details in the documentation here: Window: localStorage property .
Also, It's unclear exactly where the config.autosave = { ...} should go?
I believe you need to put it where you have your other configurations as well, the line you initially copied.
But the format I think it should be without the config. part, just:
autosave: {
Savekey: 'your_key'
}
No, I'm referring to the readme file where it states adding additional config entries, line 29
Yes, we’re referring to the same thing. The autosave plugin configuration should be added in the same place as the other settings. For example:
Unfortunately, nothing seems to work, not even creating the local storage.
Can you please let me know which forge component are you using exactly? I will try to implement the plugin myself to see how it exactly works.
CKEditor(CKEditor)CKEditor 4 - Smart WYSIWYG HTML editor - http://ckeditor.comVersion 4.14.0 (04-03-2020)
You’re not using a Forge component in OutSystems? Are you integrating it directly? Could you share your OML or the link to the component?
Hi @Tim Kempton
I managed to get the auto-save functionality working in a demo OAP. However, I need to point out an important consideration before sharing the solution.
The version I used for this demo is CKEditor 4.22.1, which has known security vulnerabilities. So you can change to a more secure version, and update the JavaScript to make it work like you want.
EDIT: I just notice you need it for Traditional Web, so I made another working version with Traditional, you can check in the Entity called Test, the updates in the input so you can save in the database too if needed!
Greetings, Claudio.
Hi Claudio, I have now got this working but it doesn't support drag 'n' drop of images
Hi @Tim Kempton I managed to make a working version with drag n' drop, and it saves in the database as a Base64, if you want to upload to an URL, you need to change a bit the JavaScript but isn't that hard to do it
Greetings, Claudio