voidlabs / mosaico Goto Github PK
View Code? Open in Web Editor NEWMosaico - Responsive Email Template Editor
Home Page: https://mosaico.io
License: GNU General Public License v3.0
Mosaico - Responsive Email Template Editor
Home Page: https://mosaico.io
License: GNU General Public License v3.0
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.
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
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:
I think not all styles are also present inline. Many mail clients only support inline css markup.
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
the template should only contain the necessary markup - stripped for all CSSunrelated to Mosaico.
Does this make sense ?
Kind regards
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.
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.
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:
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.
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.
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?
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. :-)
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?
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".
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)
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.
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.
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! ๐
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!
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?
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
The gallery pane needs some care:
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,
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.
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!
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!
A set of tricks to make the email adapt to narrow screen without the need of media queries:
https://github.com/fcarneiro/tedc15_template
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.
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.
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.
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.
As far as I understand
But if I want to make a Template with a given main structure, I need several drop zones.
Would it be possible to have one container which defines the blocks and another placeholder for dropzones.
Then I could have a template like this:
<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>
Which would give me the overall structure of the letter with slots to drop in blocks.
The dropzones might be serialized, such that moving up and down would move blocks even between dropzones.
We should add some hook so to alert users they are leaving the editor.
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
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
Hotmail adds a bottom margin to p tags: we should prevent this with custom styles.
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
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.
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?)
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.
Hi,
Try below the scenario
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,
Horizontal spacing between social icons is lost in outlook(word) 2007/2010/2013.
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.
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.
I need to translate toolbar.
How do I do?
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.
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)
Node Version : 5.1.0
npm Version : 3.3.12
Currently mosaico loose the original DOCTYPE and replace it with the one used for the "hosting" page (html5).
Would it be possible to generate a desktop application of the editor e.g. using electron (https://github.com/atom/electron)
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!
We bundle localstorage saving by default: maybe it should be simply automatic and not triggered by "Save" button.
Older apple mail (and generically older webkit) does not support max-width on table elements.
So we have to add an additional
Apple Mail 6 on Snow Leopard show this issue, maybe others...
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.
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
Some mosaics (images placeholders) in the width parameter is passed to null.
someone tell me where can I fix this problem?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.