2

冷门知识<!DOCTYPE html>在富文本编辑器中的应用

 1 year ago
source link: https://www.daozhao.com/10775.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

冷门知识<!DOCTYPE html>在富文本编辑器中的应用

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

冷门知识<!DOCTYPE html>在富文本编辑器中的应用

<!DOCTYPE html>能有什么作用，之前只是听说声明为HTML5文档，必须写在在html文档的第一行，它会让浏览器强制使用w3c标准来解析和渲染页面。

其实在浏览器中存在两种文档解析模式：

  • 怪异模式：BackCompat，使用浏览器自己的模式解析标签。
  • 标准模式：CSS1Compat，使用W3C标签来解析标签。

可以通过document.compatMode返回结果得知当前是何种模式，目前使用BackCompat的场景并不少。

了解这个有什么用呢？我也是最近在尝试调研163邮箱默认样式技术细节的时候，发现了一点它的具体作用。

模式不同，浏览器对dom渲染高度的计算有所不同，目前已知的是父元素设置的font-size是否影响子元素height上。

有点抽象，可以举个具体的例子。 富文本编辑器的编辑区域多半是在一个iframe里面，我们直接看这个iframe里面的html结构

<html>
 <head></head>
 <body class="nui-scroll" spellcheck="false" autocorrect="false" contenteditable="true" style="cursor: auto; color: #174e85;font-size: 48px;font-family: simsun, STSongti-SC-Regular;line-height: 1.7;">
    <div style="margin: 0;">宋体48px</div>
    <div style="margin: 0;">宋体48px<span style="font-size: 12px;">12px</span></div>
    <div style="margin: 0;"><span style="font-size: 12px;">12px</span></div>
    <div style="margin: 0;"><span style="font-size: 12px;">12px</span></div>
    <div style="margin: 0;"><span style="font-size: 12px;"><br></span></div>
 </body>
 </html>

我们就看看body下面有几个div的兄弟节点：

  • 第一个div自己没有设置字号，继承body的字体、字号宋体48px
  • 第二个div依然继承body的字体、字号宋体48px，里面多了个设置了字号12px的span
  • 上面的12px直接回车后，就会出现第三、第四个兄弟节点了，依然保存12px

我们先看第一行渲染的高度81px，基本就是body的字体乘以行高（48px*1.7=81.6）的结果，第二行同理。

file

第三行呢，div虽然也继承了body的字体字号，但是渲染高度的结果却与第一个不同，而是它的子元素span的渲染高度，也就span的字体乘以行高（12px*1.7=20.4）的结果，第四行同理。

file

这种渲染结果是符合我们在编辑器场景下的预期的，如果不是这样的话，即使里面写的内容字体很小，body下的div兄弟节点的渲染高度都不会小于81px，那样看起来会相当的怪异，具体我们试一下便知。

我们在前面加上<!DOCTYPE html>将其改用标准模式测试下。

第三行渲染的高度也跟第一、第二行一样了

file

其内部的span是12px

file

在使用编辑器的实际需求中，我们期望第三、四行之间是没有这么大的“间距”的，在标准模式下，显示不符合，想通过最外层容器设置了字体字号供子元素继承实现默认样式就走不通了。

一些冷门的知识点，特别是表述很笼统的，不是亲自碰到，根本不知道有什么用，获许也只有真正用到它的人才可能会尝试了解它。

一封邮件不同一篇博文，博文是基本只会在我们自己的平台看，而邮件是很可能发给其它平台的，自己作为生产端展示没问题，不代表其它查看端就一定没问题，不是一个简单的“自产自销的产品”。

用户编辑器部分我们自己能控制使用怪异模式，在自己的客户端查看邮件的时候也能使之改用怪异模式，我们如何控制其它端的展示呢？比如outlook、qq邮箱、gmail。待续。。。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK