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>

清除成功。