在浏览器中编辑基于HTML的时事通讯-“；“页面内的页面”；设计模式

我正在构建一个应用程序，允许用户根据预定义的模板构建自己的电子邮件时事通讯

我有一个页面显示项目名称等，以及其中列出的新闻稿。对于这一个，我使用iframe，因为它似乎是最简单的解决方案

application page
    iframe
        html template with html content

然而，现在我正在编辑页面，我开始怀疑iframe是否是这种情况的解决方案

在编辑页面上，我想显示嵌入在新闻稿模板主体中的编辑器，这样用户可以在仍然看到模板的情况下在位编辑可编辑区域。此外，我希望在他们保存新版本之前向他们显示预览

因此，编辑屏幕看起来像：

application page
    html template containing the editable area
        ckeditor allowing editing the editable area

现在，如果我对可编辑视图使用iframe，那么ckeditor必须嵌入iframe中。而且，如果我提交iframe，那么应用程序页面不会刷新。此解决方案和解决方案似乎过于复杂/过于工程化

application page
    iframe
        html template containing the editable area
           ckeditor allowing editing the editable area

那么，另一个解决方案是什么呢

我正在考虑将时事通讯模板的CSS样式和正文标记内容显示在应用程序页面中。我必须确保为应用程序定义的样式是唯一的，以避免它们与时事通讯样式冲突，这可能是可行的。此外，我还可以控制模板，并能够识别要合并到页面正文中的区域

application page
    merged html template css
    html template body tag content 
        ckeditor allowing editing the editable area

这对我来说有点脆弱，因为我必须动态提取样式和主体标记内容，并且不确定它们是否会在应用程序页面中100%正确显示

我想这是一个相当普遍的模式，我想知道其他人是如何解决这个问题的，或者你会如何解决它

特别是想知道是否会有一个设计上的变化，这将简化过程和技术解决方案

---

我正在Rails 3.2中构建它。

我构建了与此非常相似的东西。我考虑过使用像FCK这样的WYSIWYG编辑器，但告诉它删除自己的样式或计算文本节点的渲染样式太麻烦了

相反，我在任何相关元素上使用了

contenteditable

属性

在后端，当进行更改时，iframe会不断写入服务器。您可能会使用HTML5存储来实现这一点，然后可以减少AJAX调用的频率

---

这样，您就可以完全控制样式及其应用方式。

在我看来，最好是手动编写html电子邮件，因为在布局方面可能出现的错误数量是惊人的，谢谢。在这种情况下，HTML模板是手工编码的，但随后对内容进行了几十次更改。因此，我只提供编辑内容的权限。