原文转载自道招网的《CKEditor系列（六）改造原编辑器默认样式dom结构效果对比》
熟悉的朋友应该知道之前是用的wangEditor，近期才迁移到CKEditor，很早的时候项目就支持一个叫“默认样式”的功能，需求就是部分BU希望能够统一邮件对外发送的样式，比如统一使用“宋体，黑色，18px”。
之前在wangEditor上是这么实现的
<p class="default-email-style" style="margin: 0px;font-size: 18px;font-family: 宋体;color: #000000;">
关于这份预订，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</p>
也就是用了一个名为default-CtripEmail-style的class标记，然后将后台配置的样式全部赋值给这个class的行内样式。
为什么用行内样式
邮件项目为确保发送出去的邮件样式和编写时一致，最好的方案就是写行内样式
改成符合CKEditor的规则的是这样的
<div class="new-default-email-style">
<span class="new-default-fontFamily-style" style="font-family:宋体;">
<span class="new-default-color-style" style="color:#002060;">
<span class="new-default-fontSize-style" style="font-size:18px;">
关于这份预订，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</span>
</span>
</span>
</div>
还是用一个名为new-default-email-style的class包裹住容器，具体的每一个样式都需要单独使用一个span。
这样改动后CKEditor的功能就在默认样式区域（即new-default-email-style的区域），完全生效了。
效果图与wangEditor上面的一样。
为什么需要改变默认样式的dom结构呢？
这样因为和CKEditor及其它主流的编辑的使用规则不一致，导致编辑器的部分功能（格式刷、清除样式等）无法正确生效。
产生此问题的原因
因为编辑器认为样式是在span上的，不会识别其它标签（比如p、div）上的样式，无视上面的style样式，或者认为它上面没有样式。
改造前后效果对比
下面以清除样式为例来对比改造的效果对比
默认样式的dom结构改造前
- A 选中下面的内容，进行清除样式。（老版dom结构）
<p class="default-email-style" style="margin: 0px;font-size: 18px;font-family: 宋体;color: #000000;">
关于这份预订，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</p>
你会发现没有任何效果，因为编辑器认为这里根本就没有设置样式，也没就没什么可以清除的，所以默认样式（margin: 0px;font-size: 18px;font-family: 宋体;color: #000000;"）并未被成功清除。
- B 选中下面的内容，里面有个设置为红色的span，进行清除样式。（老版dom结构）
<p class="default-email-style" style="margin: 0px;font-size: 18px;font-family: 宋体;color: #000000;">
<span style="color: red">关于这份预订</span>，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</p>
你会发现"直接回复"上面的红色效果被清除了，因为编辑器发现里面有个span有style="color: red"样式，需要进行清除操作，其它的默认样式依然未被清除。
默认样式的dom结构改造后
- A' 选中下面的内容，进行清除样式。（新版dom结构）
<div class="new-default-email-style">
<span class="new-default-fontFamily-style" style="font-family:宋体;">
<span class="new-default-color-style" style="color:#002060;">
<span class="new-default-fontSize-style" style="font-size:18px;">
关于这份预订，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</span>
</span>
</span>
</div>
清除后效果，使用的chrome的默认样式
清除后dom内容变成
<div class="new-default-email-style">
关于这份预订，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</div>
清除成功。
- B' 选中下面的内容，里面有个设置为红色的span，进行清除样式。（新版dom结构）
<div class="new-default-email-style">
<span class="new-default-fontFamily-style" style="font-family:宋体;">
<span class="new-default-color-style" style="color:#002060;">
<span class="new-default-fontSize-style" style="font-size:18px;">
<span style="color: red">关于这份预订</span>，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</span>
</span>
</span>
</div>
清除后dom内容变成
<div class="new-default-email-style">
关于这份预订，我们的客人希望获取酒店的确认号以确保后续入住，我司会在2小时后询问此事件的处理情况，若有任何进展，直接回复本邮件即可，谢谢。
</div>
清除成功。
