The current skin has been created to match VOXmail product: now that we extracted the editor as a standalone opensource library, we can create a new more appealing flat skin.

Horizontal spacing between social icons is lost in outlook(word) 2007/2010/2013.

I need to translate toolbar.
How do I do?

If anything goes wrong at the server side, there is no feedback to the user. mosaico silently does not work.

For example, if upload of an image fails, and the server does not respond with a valid JSON, one needs to open the console ...

I don't know if we have a specified error response from the server such that mosaico can detect error conditions. But if the reponse is not a valid JSON, mosaico could report the response in an alert.

Currently mosaico loose the original DOCTYPE and replace it with the one used for the "hosting" page (html5).

When I run mosaico against the local webserver and create a big newsletter, then I get this. Is it an issue of the backend?

Error: request entity too large
at readStream (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/body-parser/node_modules/raw-body/index.js:196:17)
at getRawBody (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/body-parser/node_modules/raw-body/index.js:106:12)
at read (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/body-parser/lib/read.js:68:3)
at urlencodedParser (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/body-parser/lib/types/urlencoded.js:109:5)
at Layer.handle [as handle_request](/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/express/lib/router/index.js:312:13)
at /Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/express/lib/router/index.js:330:12)
at next (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/express/lib/router/index.js:271:10)
at jsonParser (/Volumes/Macintosh HD/Users/beweiche/beweiche_noTimeMachine/204_ruby-hacks/mosaico/node_modules/body-parser/lib/types/json.js:107:37)

Currently mosaico depends on a few forked libraries:

"knockoutjs-reactor": "bago/knockoutjs-reactor#v1.3.6-mosaico",
"knockout-jqueryui": "bago/knockout-jqueryui#9452901885186c94f97b34535374cbe31405a882", 
"knockout.wrap": "bago/knockout.wrap#mosaico", 
"evol-colorpicker": "bago/colorpicker#mosaico", 

I created PR for most of them, so as soon as they make releases we should update to official repositories.

• knockoutjs-reactor has merged my PR, so we just need a new release
• knockout-jqueryui just needs a small bower change and a new release
• knockout.wrap asks for tests in order to merge support for the feature we need
• evol-colorpicker already merged my PR, so we just need a release and an update in our code to deal with changes in "change" event.

Outlook does use the vlink="" color from the body attribute or a a:visited { color: #ccc } rule in the style, but does not support more specific selectors like .class a:visited { color: red } to make different visited colors in different places.

This is unfortunate when the colour of the links in the "frame" of the email is the same as the background of the body: this way the visited links "disappear".

Hello guys,

I can not run an application locally, I downloaded the source code, but it fails, I miss JS libraries:

/dist/mosaico-material.min.css?v=0.10
/dist/notoregular/stylesheet.css
/dist/mosaico.min.js?v=0.11

The error returned was "Mosaic is not defined"
where can I download the libraries that are missing?

thank you in advance.

Hello guys,

I have a problem with the installation.

You are running the following command: npm install

the following error appears:

C:\Temp\mosaico-master>npm install
npm WARN install Couldn't install optional dependency: Unsupported

[email protected] postinstall C:\Temp\mosaico-master
bower-npm-install --non-interactive

(node) util.error is deprecated. Use console.error instead.
Error: Cannot find module 'bower/node_modules/bower-logger'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (C:\Temp\mosaico-master\node_modules\bower-npm-install \lib\install.js:9:14)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)

someone give me a help? thank you

I've done about 80% of the PHP back end yesterday. I am more than happy to share the code. But to complete the back end I have some questions and comments:

1. There is apparently no way to delete uploaded images. I am not sure if I am just missing something in my back end, or if this ability is truly missing from Mosaico. As far as I can tell, the only way to delete images is to SSH / FTP to the uploads folder and delete them manually. For the fileupload.js JSON response I am not returning the delete_url and delete_type field / values. Could this be why? I looked in the main.js reference and listFiles function is not returning those either which is why I did not bother.

2. I had to make some modifications in editor.html to the following starting around line 31:

var webpath = window.location.href.substr(0, window.location.href.lastIndexOf('/'));
var ok = Mosaico.init({
imgProcessorBackend: webpath + '/img',
emailProcessorBackend: webpath + '/dl/',
titleToken: "MOSAICO Responsive Email Designer",
fileuploadConfig: {
url: webpath + '/upload/',
// messages??
}
});

The differences are: (a) doing a full url instead of a relative url because when downloading the email the relative urls are used as img src parameters, which means images will be broken if viewed on a different website or in an email client. Also by doing this, we make Mosaico able to work in subfolders instead of requiring it to be at the root of the domain. And (b) I added a trailing forward slash to /dl/ and /upload/ because without the forward slash at the end some web servers will do a 301 redirect to add the forward slash and this causes post data to be lost because Mosaico will redirect using a get instead of retrying the post.

3. For the /img back end function I have the 'placeholder' and 'resize' coded. I cannot seem to find a use case for the 'cover' path. Can you tell me how I can make Mosaico request the 'cover' method so I can finish this part in the PHP back end?

4. Also regarding the /img back end function - The 'resize' method function seems to be used directly inside the downloaded html email. This means if I send this out to 1 million people, my server will be overloaded with 1 million+ resize requests. There should be some caching system similar to thumbnails in Mosaico - for example creating a /uploads/resized/ path and storing resized images in there with file names like width_x_height_filename and then storing the direct url to those resized images when downloading the html emails. My server's CPU will thank you. :-)

5. I have not done the 'email' path for the /dl function yet. This and the 'cover' path for /img are the only remaining things to code for the PHP back end that I have, and it is complete. The PHP back end is just 3 files and does not have any dependencies other than requiring Imagemagick for PHP to be installed. Can you tell me what the best way is to share this with you?

Mosaico currently "ignores" conditional comments: mosaico leave conditional comments and commented code AS IS, in the output email. So if you put colors or contents in your template and tha styles/contents are edited by the user using mosaico they won't be replaced inside conditional comments.

This prevent using parametrized/editable Bulletproof Buttons or Bulletproof Backgrounds in mosaico templates.

Hello!

Cloned from git, ran npm install, finished OK.
when running grunt, I get the following:
Running "combineKOTemplates:main" (combineKOTemplates) task

Running "browserify:debug" (browserify) task

Error: Cannot find module './checkModel.js' from '/home/devmaile/public_html/mosaico/mosaico/src/js/converter'
Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings.

Any ideas?
Thanks!

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.

Hello guys.
I'd like to detect somehow that user dropped a block and changed its content to prevent using of newsletter with default block content.
Is it possible to detect somehow what block content changed (or not changed) ?
thank you in advance.

The current template language is very flexible but also complex: it supports complex scenarios, let you define you labels, what styles to make editable, alternatives, conditional blocks, expressions and automatic color manipulation.. this is much more than most users need and create a barrier for newbies.

Most people simply need to take their html template, define what are the draggable blocks and choose what images are editable and what texts/buttons should be changed by the user. Most time they don't need style customization or anything else, because they already hardcoded the right style in the template.

We should support a simpler language for simpler use cases!

Hello, and congratulations on your great project!
I have a problem:
I have transferred all the necessary files (with the apache backend sample) to my wamp/www folder, and when i enter localhost:9000 I can see the template selector screen. I can also create a template, block by block, but when trying to upload images, it fails. I can't see the image in the "recents" tab, although a copy of the image is created in "uploads" folder in the file system.
Grunt is running with no errors.
Any help would be appreciated

Hi,

I am new to node.js and knockout.js. I tried to add some code in viewmodel.js but the changes are not
reflecting in my localhost.

I restarted my server but no luck. what should I do get JS changes.

Thanks.

Hi all,

I'm very happy to finally find an open source mail template editor, good job guys!

To help a little to perfect the html and css you're using, I'm posting two screenshots of what the email template looked like in the editor vs. how it looks in my mail client.

In the editor:

In my mail client (Outlook 2013)

Some big differences are:

• Colored links
• Buttons
• Social icons have no padding left

I think not all styles are also present inline. Many mail clients only support inline css markup.

Images render with broken placeholders in editor. Verified that imagemagik is installed and configured properly, but am unable to upload any images in the editor.

When trying to upload an image, I get:
error inaspettato durante il caricamento (not found)

Also, image placeholders show as broken links as well.

Any other pre-requisites needed or scripts added?

Thanks much for your help and this awesome editor. Very well done!

Would it be possible to generate a desktop application of the editor e.g. using electron (https://github.com/atom/electron)

OK Now that I have my Mosaico installed, I am testing it out and my image uploads are not working. I checked the developer tab in Chrome and it is whining about /uploads not existing at the root website address. I have Mosaico installed at https://somedomain.com/mosaico and the uploads folder is at https://somedomain.com/mosaico/uploads. But it is currently looking for uploads at https://somedomain.com/uploads instead. Is there a way to fix this (some config file somewhere?)

Awesome work! Thanks for sharing your code. It works fine in my localhost.

May I know where the codes for download button has been written

I can see the proper template structure in the downloaded html file which is working fine even in Outlook, Have you used any parser to build this email template.

I would like to store this template to my server and re-load the saved template to the editor again.

It would be very helpful if you give some brief about this

Thanks,
Balaji. K

A set of tricks to make the email adapt to narrow screen without the need of media queries:
https://github.com/fcarneiro/tedc15_template

The entire install process works fine except for npm install for node-byline which returns:

[root@liquidweb3 /home/usked/subdomains/alpha/public/mosaico]# npm install
npm WARN package.json [email protected] No repository field.
npm ERR! git clone git://github.com/SevInf/node-byline.git Initialized empty Git repository in /root/.npm/_git-remotes/git-github-com-SevInf-node-byline-git-d6518a15/
npm ERR! git clone git://github.com/SevInf/node-byline.git
npm ERR! git clone git://github.com/SevInf/node-byline.git github.com[0: 192.30.252.130]: errno=Connection timed out
npm ERR! git clone git://github.com/SevInf/node-byline.git fatal: unable to connect a socket (Connection timed out)
npm ERR! Error: Command failed: github.com[0: 192.30.252.130]: errno=Connection timed out
npm ERR! fatal: unable to connect a socket (Connection timed out)
npm ERR!
npm ERR! at ChildProcess.exithandler (child_process.js:658:15)
npm ERR! at ChildProcess.emit (events.js:98:17)
npm ERR! at maybeClose (child_process.js:766:16)
npm ERR! at Socket. (child_process.js:979:11)
npm ERR! at Socket.emit (events.js:95:17)
npm ERR! at Pipe.close (net.js:466:12)
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/npm/npm/issues

npm ERR! System Linux 2.6.32-504.16.2.el6.x86_64
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /home/usked/subdomains/alpha/public/mosaico
npm ERR! node -v v0.10.40
npm ERR! npm -v 1.4.28
npm ERR! code 128
npm ERR! not ok code 0

Hi,
Is it possible to add tracker params to all href by the content tab ?
I tried to concat 2 varibles into -ko-attr-href but I got errors...

Thx

Older apple mail (and generically older webkit) does not support max-width on table elements.
So we have to add an additional

I have installed mosaico in a subdirectory (http://www.weichel21.de/mosaico). When click on the mosaico icon in the editor it goes back to the root of the server but not to the mosaico page.

We should add some hook so to alert users they are leaving the editor.

1. sidearticle with image on the right makes the spacing between image and text disappear
2. 3 column blocks have left spacing larger than right spacing on the middle column
3. outlook on 125 DPIs breaks many things: e.g. button block is narrower than blocks with images

Hi,

Currently trying to create a template - but having issues getting the template to work.

Would it be possible to have a - really simple - example - demonstrating the basic features - such as

• removing content (on/off)
• editing textblock
• editing image

the template should only contain the necessary markup - stripped for all CSSunrelated to Mosaico.

Does this make sense ?

Kind regards

Hey guys,

I've just downloaded the zip of mosaico which seems awesome.
I uploaded it on my server but I've a lot of missing files (all from the 'dist' folder).
Am I missing something?

Thanks!

Hotmail adds a bottom margin to p tags: we should prevent this with custom styles.

The gallery pane needs some care:

1. the dropzone, unlike the "content dropzones for images" does not highlight when you try to drag a file from the desktop
2. the dropzone does not show errors via "toastr" when an upload error happens
3. the gallery doesn't handle errors when loading the remote image list.

Hello Mosaico team.
First of all I'm telling to you all words of thanks for really great work. You have implemented really flexible editor and after months of research I may say definitely that this is the better newsletter editor which I saw.

One small bug: there are untranslated buttons tooltip in preview mode for Large, Desktop and Mobile.

thank you.

moxman is not included by default so it only works if you have in the page a tinymce using the link plugin.

this is not a problem in the opensource library that does not bundle a moxman integration.

reported via chat

Hi, Clicking on Download button leads to page not found and says "localhost/dl" not found on the server. I don't see /dl folder in github. How it works? Could you help me on this.

Also you said you have done inline styling in php(backend) in your site but in github you have used Styliner. Is Styliner itself is enough or I have to work something in backend for inline styling.

Thanks.

KO 3.4 should be a bit faster, but we have hacks in place depending on KO 3.2 or 3.3, so we have to add hacks for KO 3.4 and hope this doesn't break.

I don't know when this happens because Email On Acid previews are OK and a test on a real iPad works fine. But Litmus tests show spacing in "columns" so that the layout breaks (ends up into multiple lines).

This can be fixed by removing the spaces (newslines) between the "inline-block divs" used to center the columns.

Stefano wrote:

We probably can deploy a generic "backend" save/load plugin that takes
an url to be invoked at load and another to POST saves, but I don't
know what is "generic" (a single save POST with both the metadata and
the generated html? 2 different methods to save the metadata and to
"export" the generated html?). We'll have to see some people embed
use-case in order to better understand this and make some better
plugin to help future integration.

I open this issue in order to discuss the methods for such a plugin. Here are the initial proposals. I will update the issue from time to time based on the discussion.

simple version

• save an email (JSON and html) additional fields: date, time, username
• list available emails
• delete an email
• load an email

advance mode

• save an email with versions
• list versions of an email
• compare versions of an email
• restore earlier version of an email

Hello guys,
Firstly I'd like to give you guys a thumbs up for this project, there are so extremely few projects for email editors, and this one looks promising. So best of luck with this!

I am trying to test it on Apache and while on grunt version works just fine, I keep getting "Missing initialization hash" on apache. Not sure if I missed any special steps though (Moved dist/ and editor.html to my Apache serving directory)

Any directions would be appreciatted.

Installation failed giving this errors
$ npm install
npm WARN install Couldn't install optional dependency: Unsupported

[email protected] postinstall C:\wamp\www\newsletter
bower-npm-install --non-interactive

(node) util.error is deprecated. Use console.error instead.
Error: Cannot find module 'bower/node_modules/bower-logger'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:289:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (C:\wamp\www\newsletter\node_modules\bower-npm-install\lib\install.js:9:14)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Module.require (module.js:366:17)

For grunt below error

Node Version : 5.1.0
npm Version : 3.3.12

I propose to put the templates/*/edres folders to .gitignore. This makes it easier for contributors, since these files are rebuilt by grunt and then flagged as changed.

We bundle localstorage saving by default: maybe it should be simply automatic and not triggered by "Save" button.

I intend to put functionality in a block for data to backend?
would then be a button on the module, pass a parameter and make a call to the server. receive an image URL and description to fill the block.
if possible, what is the best way to do this?

Some mosaics (images placeholders) in the width parameter is passed to null.

http://localhost:2628/TemplateBuilder/Img?src=..%2F..%2Fuploads%2FDesert.jpg&method=resize&params=320%2Cnull

someone tell me where can I fix this problem?

Hi,

Try below the scenario

1. Click versafix-1 from http://mosaico.io/
2. Click ADD button instead of clicking on block image

The random hash value in the URL is gone. Even though I can able to save the template, unable to reload.

I think viewModel.addBlock() function should have event.preventDefault().

Thanks,

This is a missing feature in IE and Tinymce doesn't do anything about it.
https://msdn.microsoft.com/en-us/library/ms537837(v=VS.85).aspx
http://www.surrealcms.com/blog/tables-internet-explorer-and-contenteditable

Maybe we need a workaround, like automatically nesting a div with width/height 100% and make that div editable.

As far as I understand

  <div data-ko-blockdefinitions="main"> </div>


  <div data-ko-container="main">
    <h1> Week 1 </h1>
    <div kdata-ko-dropzone></div>
    <h1> Week 2 </h1>
    <div kdata-ko-dropzone></div>
    <h1> Week 2 </h1>
    <div kdata-ko-dropzone></div>
    <h1> Week 3 </h1>
    <div kdata-ko-dropzone></div>
  </div>

Hey,

So I was trying to get up and running mosaico on CentOS 7.
Long story short, npm install fails with:

Stack trace:
Error: Error (1): npm install --production in bower_components/knockout
    at ChildProcess.<anonymous> (/home/web/apps/mosaico/node_modules/bower-npm-install/lib/install.js:137:57)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:766:16)
    at Process.ChildProcess._handle.onexit (child_process.js:833:5)

Console trace:
Error
    at StandardRenderer.error (/home/web/apps/mosaico/node_modules/bower/lib/renderers/StandardRenderer.js:82:37)
    at Logger.<anonymous> (/home/web/apps/mosaico/node_modules/bower-npm-install/lib/coa.js:71:26)
    at Logger.emit (events.js:95:17)
    at Logger.emit (/home/web/apps/mosaico/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
    at _rejected (/home/web/apps/mosaico/node_modules/bower-npm-install/node_modules/q/q.js:808:24)
    at /home/web/apps/mosaico/node_modules/bower-npm-install/node_modules/q/q.js:834:30
    at Promise.when (/home/web/apps/mosaico/node_modules/bower-npm-install/node_modules/q/q.js:1079:31)
    at Promise.promise.promiseDispatch (/home/web/apps/mosaico/node_modules/bower-npm-install/node_modules/q/q.js:752:41)
    at /home/web/apps/mosaico/node_modules/bower-npm-install/node_modules/q/q.js:574:44
    at flush (/home/web/apps/mosaico/node_modules/bower-npm-install/node_modules/q/q.js:108:17)
System info:
Bower version: 1.4.1
Node version: 0.10.40
OS: Linux 3.10.0-123.8.1.el7.x86_64 x64
Error: Error (1): npm install --production in bower_components/knockout
    at ChildProcess.<anonymous> (/home/web/apps/mosaico/node_modules/bower-npm-install/lib/install.js:137:57)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:766:16)
    at Process.ChildProcess._handle.onexit (child_process.js:833:5)

npm ERR! [email protected] postinstall: `bower-npm-install --non-interactive`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the mosaico package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower-npm-install --non-interactive
npm ERR! You can get their info via:
npm ERR!     npm owner ls mosaico
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.10.0-123.8.1.el7.x86_64
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /home/web/apps/mosaico
npm ERR! node -v v0.10.40
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /home/web/apps/mosaico/npm-debug.log
npm ERR! not ok code 0

The full output: http://pastebin.com/mPW8ixXw
The partial npm-debug.log: http://pastebin.com/F9bVtjDp

Any ideas what the issue might be?

Thanks!

PS: the demo looks promising, good job! 👍