Replacing TinyMCE or CKEditor with Mosaico

What's wrong with TinyMCE/CKEditor and the emails?

TinyMCE and CKEditor are the most used WYSIWYG editors. With their latest releases (4.x) they both removed some "html editing features" and moved to a "content editing" solution more suited to the web pages than html email. "Full page" editing (editing an html with full head/body structure) is not one of their goals, too.

In html email you have to use many tweaks, using nested TABLEs for layout, using html attributes, dealing with outlook conditional comments. No one can create a modern full template by just using those editors. At most you can create some html that will work fine on a very small set of devices. There's no way you can create a responsive email using TinyMCE or CKEditor. And you'll probably break a responsive html email when you try to edit it using such an editor.

You use CKEditor or TinyMCE to let your user edit their page CONTENTS, not their website layout: for that you use a website THEME, that has not been created nor edited with CKEditor or TinyMCE. You don't use CKEditor/TinyMCE to edit full page layouts, why would you expect to edit full email messages?

HTML email templates can only be written by professionals

Don't make the mistake of thinking html for email is an easy thing. Even a skilled HTML/CSS frontend developer will fail hard when creating an email from scratch. Your only option is to start from an existing good template or create one by starting from an email template boilerplate while understanding every client/device issue you need to workaround.

Writing a responsive template that will correctly adapt to most client devices from scratch will take DAYS even for experienced authors. Customizing an existing template is something different.

So, an HTML email template is somewhat like a Wordpress Theme: you take one of them and you customize what the author decided to let you customize, then you use CKEditor/TinyMCE only to edit content, not to change the theme appearance!

Template based editor

So, in order to use Mosaico you have to decide if you want to use it with a single template/theme or if you need a "multiple theme" option. Please note that a single theme may be very, very flexible and let you create hundreds of different designs that you can't guess are created using a single template, so don't hurry answering this question and take your time to explore how much customization can be provided by a single theme (look at the default versafix-1 template and the style options available for each block).

When you use TinyMCE or CKEditor to edit a full html email your entire email is container in a TEXTAREA and is read and written in this TEXTAREA by the editor itself. When you load/save the page your email content is read/written as part of the page GET/POST. So you have one single piece of content: you just need to see it in order to edit it and you send it "as is" when you send the email.

With Mosaico you need much more than this:

• You need a master-template reference: you have to know what master-template in use.
• Your real content will be a JSON structure saying how the master-template is configured, which blocks are used and what are their contents.
• Given the master-template and the JSON structure, Mosaico will also be able to produce an output html that will be eventually sent.

The default "demo setup" for Mosaico stores the template-reference and the content-structure in the user browser's local storage and lets you download or send the generated output-html. It's up to you to decidee where to store the data and how to load it back, but you understand you can't simply replace TinyMCE as-is because we need to keep memory of the "sources" (template + content) for your generated content in order to let you change it afterward.