Javascript 正在创建HTML邮件编辑器。。进修班？

所以我基本上是在创建一个邮件编辑器。。（只希望它是一个带有contenteditable的div，在这里我可以切换HTML/明文，并且我已经创建了一个Word样式编辑器（装饰/颜色/字体/大小等）

我不想使用插件

我遇到的问题是div正在从页面插入样式=/这一点都不好，我如何防止它

例如，使用H1。 一个“不好”但有效的解决方案是只设计类而不是示例H1。但是有什么好方法吗

示例图片：

您可以查看。包括或复制它们并添加到可编辑的DIV中：

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

---

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

---

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

如果你不太关心向后兼容性，你可以使用阴影DOM。设置applyAuthorStyles=false并重置ShadowRoot上的tyleheritation=true可防止父文档的CSS影响阴影DOM

可以通过调用div元素上的createShadowRoot（）来创建ShadowRoot。或者，您可以使用一个方便的库或为编辑器创建web组件

---

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

如果您将其用作html电子邮件编辑器，您不应该使用类似

的语义标记。html电子邮件与现代web标准不兼容

我建议将所有WYSIWYG文本转换为

或

标记，并使用内嵌CSS

---

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

您可以将其放在iframe中。我相信其他富文本编辑器也会这样做，比如TinyMCE。嗯，是的，也许这就是解决方案H1看起来像普通文本，我根本不想让它成为样式，它应该像一个default H1..这是CSS重置。我说的是上下文重置。检查。上下文重置为浏览器默认值。我们已经构建了它的实际编辑器，并且在我们正式支持的所有版本中都工作得很好。但是，是的，似乎iframe是一种方式：）如果你已经有了工作组件，那就不同了，在这种情况下，必须使用iFrame。请接受我的回答：）问题是我们需要支持IE7+，所以HTML5和CSS3的东西都是有点像“nono”=/这看起来更复杂。。我刚从编辑器中制作了一个iframe，花了3秒的时间，它工作得很好：P但是为了学习，我会研究它。我使用字体，h1只是为了显示css问题