邮件模板ajax,邮件模板工具mosaico和现有VUE工程的整合（一）

mosaico是一个电子邮件模板制作的单页应用工具，采用nodejs开发，grunt发布。如果要使用原版默认的图片上传功能，那么还需要在你的电脑中安装ImageMagick。

项目地址在https://github.com/voidlabs/mosaico

screenshot.png

本次的需求是要在已有的vuejs项目工程中引入这个项目。完全重写mosaico的grunt发布命令太麻烦，而且未尝试过也不知道能否成功。所以采用vuejs父页面+iframe子页面引入，postmessage互相通信的方式。另外，原版里有不使用图片上传而直接使用在线图片引入模板的功能，所以本次的图片上传也不在讨论范围之内。

首先，下载好mosaico的代码在本地运行起来，怎么运行github上都有，这里省略。发布生成的代码都在dist目录下，全部拷贝到vuejs工程的public文件夹下。我这里顺手把目录名dist改成了mosaico用以和其他资源区分。此外，mosaico的预置模板在templates目录下，一并拷贝到上述public/mosaico里。

微信截图_20210327122528.png

然后是在vue中准备父页面。

iframe里的src就是我们mosaico的页面地址。由于是作为静态资源使用，域名是和vue工程一样的。那么定义一下相对地址。

baseUrl: {

editor: '/mosaico/editor.html?',

index: '/mosaico/index.html'

}

这两个页面都在public/mosaico里可以找到，一个是新建模板页面，一个是编辑模板页面。如果运行过原工程，你会发现原版的编辑页面是类似http://localhost:9006/editor.html?0.17.5#s0flmau这样。后面的0.17.5可以去掉，#s0flmau就是要编辑模板的hashId。我们可以在父页面的created事件里调用一个初始化页面方法去后台DB检索，然后判断传回来的hashId值的有无，用baseUrl组装成src迁移到其中的一个页面。

这样初步的引入工作就做完了。还剩下两个问题，原本的mosaico生成的模板是保存到localStorage里的，怎样将其保存到DB里以便共享给其他用户编辑；iframe页面编辑完了，怎样通知父页面让其跳转到其他页面。

第一个问题：

观察一下mosaico工程编辑完保存的数据，打开localStorage，发现里面有[metadata-#hashId]，[template-#hashId]两个object。这两个就是制作完的模板数据了。

微信截图_20210327122405.png

但是，还有呢？我们需要模板的html啊，电子邮件发送的不就是html吗？点击mosaico页面的download按钮，发现可以生成html，这就是我们需要的东西。

调查一下download事件，在mosaico-master\src\js\ext\localstorage.js里。

downloadCmd.execute = function() {

downloadCmd.enabled(false);

viewModel.notifier.info(viewModel.t("Downloading..."));

viewModel.exportHTMLtoTextarea('#downloadHtmlTextarea');

var postUrl = emailProcessorBackend ? emailProcessorBackend : '/dl/';

global.document.getElementById('downloadForm').setAttribute("action", postUrl);

global.document.getElementById('downloadForm').submit();

downloadCmd.enabled(true);

};

最关键的就是

viewModel.exportHTMLtoTextarea('#downloadHtmlTextarea');

它把生成的html输出到页面上的#downloadHtmlTextarea中了。我这里稍微改造了一下，不要download按钮，点击save按钮就可以生成html。(不要删除download按钮，否则页面不会渲染出#downloadHtmlTextarea DOM从而导致报错。)

saveCmd.execute = function() {

saveCmd.enabled(false);

...

global.localStorage.setItem("metadata-" + mdkey, viewModel.exportMetadata());

global.localStorage.setItem("template-" + mdkey, viewModel.exportJSON());

viewModel.exportHTMLtoTextarea('#downloadHtmlTextarea');

global.localStorage.setItem("html-" + mdkey, global.document.getElementById('downloadHtmlTextarea').value);

saveCmd.enabled(true);

};

这样就存进了localStorage的[html-#hashId]之中。在vuejs工程中的父页面读取到这些值，然后发往后台就可以存入到DB之中了。(这也是为什么把两个工程合二为一的好处，你可以读取到同一个localStorage。而如果将两个工程分别部署，他们的端口号是不同的，localStorage也就不是互通的，你需要在mosaico工程中通过ajax调用vue工程的后台方法从而需要更多的工作。当然你也可以通过设置公开同样的一级域名来使用localStorage，但是注意一点，开发环境和生产环境是不同的，开发环境可能是没有条件使用公开域名的，这会给你的调试带来难度。)

回到上文的父页面的created事件，初始化页面的时候取出hashId和保存的object，这样就解决了数据存取的问题。

第二个问题就更简单了：

保存的按钮里写一个global.parent.postMessage方法，然后在vue页面mount事件里挂载监听器

window.addEventListener('message', messageFunc)，iframe页面就可以向父页面通信了。vue页面接收到message以后执行localStorage取值，调用后台接口保存操作。如果还要再精致一点，addEventListener之前先removeEventListener一次，避免重复监听。

至此就完成了整合的初步工作。还剩下图片功能、语言本地化等工作。留给下一次文章吧。