创建一个 HTML 邮件编辑器.. 继承类？答案

【问题标题】：Creating a HTML mail editor.. Inherting classes?创建一个 HTML 邮件编辑器.. 继承类？
【发布时间】：2014-01-05 05:14:59
【问题描述】：

所以基本上我正在创建一个邮件编辑器..（只是希望它作为一个具有 contenteditable 的 div，我可以在其中切换 HTML/Clear Text，并且我已经创建了一个 Word 样式编辑器（装饰/颜色/字体/大小等）

我不想使用插件

我遇到的问题是 div 从页面继承样式 =/ 这一点都不好，我该如何预防？

示例是使用 H1。一个“糟糕”但可行的解决方案是只设置样式类而不是示例 H1。但是有什么好的方法吗？

示例图片：

【问题讨论】：

【解决方案1】：

最好的解决方案是将内容移动到 iFrame。所有主要的 HTML 编辑器都使用这个技巧来避免主要样式对可编辑内容的干扰

也看看CKEditor devloper 对我的问题的回答。另外，我不建议您开发自己的编辑器，它一开始看起来很简单，但最终您会为浏览器不兼容问题构建很多解决方法！

【讨论】：

【解决方案2】：

你可以看看YUI CSS Reset。包括或复制他们的CSS Contextual Reset 并添加到您的可编辑 DIV：

<div class="yui3-cssreset"></div>

【讨论】：

yuilibrary.com/yui/docs/cssreset/cssreset-basic-example.html 这里的 H1 看起来像普通文本，我根本不希望它有样式，它应该像默认的 H1..
那是 CSS 重置。我说的是上下文重置。检查JSFiddle。上下文重置为浏览器默认值。

【解决方案3】：

如果您不太关心向后兼容性，可以使用 Shadow DOM。在 ShadowRoot 上设置 applyAuthorStyles=false 和 resetStyleInheritance=true 可防止父文档的 CSS 影响 Shadow DOM。

ShadowRoot 可以通过在 div 元素上调用 createShadowRoot() 来创建。或者，您可以使用便利库之一为您的编辑器创建 Web 组件 - Polymer 或 X-Tag。

对于您的问题，当然有更简单（和更便携）的解决方案，但这个解决方案可能会给您带来额外的好处，让您的编辑器更可重用和封装。

【讨论】：

问题是我们需要支持 IE7+，所以只有 HTML5 和 CSS3 的东西有点像“nono” =/ 不过这似乎更复杂.. 我刚刚从编辑器制作了一个 iframe，花了 3 秒然后它工作得很好：P 但我会出于学习目的而研究它。

【解决方案4】：

如果您将其用作 html 电子邮件编辑器，则无论如何都不应该使用 <h1> 这样的语义标签。 Html 电子邮件不适合现代网络标准。

我建议使用内联 CSS 将所有 WYSIWYG 文本转换为 <font> 或 <span> 标签。

由于 html 电子邮件使用不同的元素类型（表格与 div），因此很容易将您的页面和可编辑内容之间的 CSS 定位分开，前提是您正在格式化用户输入。

【讨论】：