道招

CKEditor系列(六)改造原编辑器默认样式dom结构效果对比

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

CKEditor系列(六)改造原编辑器默认样式dom结构效果对比

熟悉的朋友应该知道之前是用的wangEditor,近期才迁移到CKEditor,很早的时候项目就支持一个叫“默认样式”的功能,需求就是部分BU希望能够统一邮件对外发送的样式,比如统一使用“宋体,黑色,18px”。

file

之前在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上面的一样。

file

为什么需要改变默认样式的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>

file

你会发现"直接回复"上面的红色效果被清除了,因为编辑器发现里面有个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的默认样式 file 清除后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>

file

清除后dom内容变成

<div class="new-default-email-style">
    关于这份预订,我们的客人希望获取酒店的确认号以确保后续入住,我司会在2小时后询问此事件的处理情况,若有任何进展,直接回复本邮件即可,谢谢。
</div>

清除成功。

更新时间:
上一篇:下一篇:

相关文章

关注道招网公众帐号
联系博主