How to import saved html back to editor

[punnawat]

I design an email template and saved it into html code to my database (as click download button). When I would like to edit it. How to load saved template to the editor again.

[bago]

You have to save and load the "sources" too.

In the app initialization code you can see how it starts the editor from a given metadata+json model:
https://github.com/voidlabs/mosaico/blob/master/src/js/app.js#L62

You can see that methods also adds the localstorage plugin to the editor (the localstorage plugin is the one that will let you save in the localstorage). Have a look at localstorage save implementation:
https://github.com/voidlabs/mosaico/blob/master/src/js/ext/localstorage.js#L22
You can see it saves the metadata+json to the localstorage (the same loaded in the app.js).

So, you will have att your own plugin to deal with "saves" instead of the localstorage plugin and then you will have to invoke the application main "start" method passing metadata, json content, and your plugin instance.

So, you should be able to do all of this without altering mosaico code, but only "using it".

We probably should add some facilities to make this "basic usage" simpler, but we're collecting use-cases first. We need feedback.

[bwl21]

I think saved HTML cannot be brought back to the editor by reading the saved HTML file unless the data from the editor is saved in the HTML -file. You could do this in a <script id="aclvalues" type="application/JSON"> ... </script> element within the exported HTML.

Alternatively: download a email.json - file in parallel to email.html, also implement a drop method which restores from email.json.

[benoitcollet]

Hi,
My question is complementary to this one: on Mosaico website, we cannot load templates. And there is no login: templates are saved "I don't know how": I cannot clean my cache and browser data, neither modify my template from another computer.
What are the options?
Thanks!

[bago]

On mosaico.io website you currently don't have other options.
We plan to add some feature to mosaico.io in the next months, but at this time your only option is to extend the library on your own.

[ShahVivek]

@punnawat @bago @bwl21
Hi,
I want to save modified templates in database and again open it in edit mode. Actually I saved the html in database but not able to open it in edit mode.
Any suggestions or code will be helpful.
Thanks!

[bago]

Mosaico is not able to load the saved html. THe output HTML is an "export format" and it loses critical informations when you export in this format, and you can't open a generic html in mosaico.

Mosaico documents are JSON metadata+content and you can save and load them using "viewModel" (viewModel.exportMetadata() viewModel.exportJSON() ) methods or "Mosaico.init" arguments.

[dotsproject]

@bago ,

I used the mosaico editor to create the template and save it in database to edit it again later. so after creating the template, I downloaded it using the download link provided in mosaico editor, it provided the html format which i saved in database. now i want to load this content in mosaico editor to edit it but i didn't find a way to load the saved html source in mosaico editor.Can you please help me out .

I searched on internet and found that mosaico editor saves the created template in json format using two fields.
(1.) metadata
(2.) content

and for both of the fields, mosaico editor provides json format which can be saved in database as a saved template data and in case of edit the saved template , both (metadata and content) are loaded in mosaico editor which loads and shows the saved template in editor.

but I need to save the template data in html format which i have done it now just want to load that saved template(html source) in mosaico editor again soI searched through the internet but didn't find a way to load that html data in mosaico editor.

can you please help me out

[bago]

The output HTML is not a "saving", it is just an output. You can't load it back in mosaico. No way (it seems I already wrote this 3 times just in this issue).

If you want to save and load you have to store the metadata+content JSON. So, just find a place where to store that JSON and then you will be able to load them back.

You can find other issues with suggestions about what to do with metadata/content.

Do you want to do this with "HTML only"? Well.. it is a lot harder, but you can store someway "hidden" in the output html (maybe an html comment) the 2 JSON and then write a tool to extract that data from the comment so you "virtually" load it back (you don't really load the HTML, but you load the data that generated that html).

[dotsproject]

@bago @bwl21

Thanks for your feedback.

But In our application, After creating the template using the mosaico editor, I need to put that template from mosaico editor in another Editor(CK Editor) . that's why i created the template using the mosaico editor first and after downloading the template in html format , i transferred that html in CK editor to show the template there. now if i want to transfer that HTML source from CK editor to mosaico editor again, How it can be achieved.

Any suggestion Or code will be helpful to me.
Looking forward to hear from yours
Thanks

[dotsproject]

@bago @punnawat @bwl21
I have integrated the mosaico editor in my application and it runs successfully at my end, i tested on around 10-15 system and found it running but at client end(UK) , it is not working since template is not loading there on page via ajax. i suggested him to disable the firewall/antivirus and then to check on different browser as well as on different system too and he followed the same but all is vain, even I also tested it on my UK server as well and found it working at my end but is not running there. it is showing following error in browser console while loading the editor at client end.

"xmlhttprequest cannot load ........"

"No access control allow origin header is present on the requested resource
Origin is there not allowed access"

Can you please help me out ?

Any kind of suggestion would be helpful for me.
Looking forward to hear from yourside

[umar-ashrfy]

Hi guys,

I did by using a simple method.
1 ) Save the Data.
1.1. First in localstorage.

1.2. Then save it in Database.

2. Load the data back

raw_data    = <?php echo $magazine["Magazine"]["raw_data"]; ?>;
var id = JSON.parse(raw_data.edits)[0];
localStorage.setItem("edits", raw_data.edits);
localStorage.setItem("template-"+id, raw_data.template);
localStorage.setItem("metadata-"+id, raw_data.metadata);
location.href = "<YOUR URL TO editor.html>#"+id;

Hope it will help.

[manhtien2607]

simple is the best. many thanks for your post