写一个富文本编辑器需要准备什么 - Word举例IO

前端时间在知乎上回答了一个前端圈的问题 - 为什么都说富文本编辑器是天坑?

感觉我的回答多少有点有带不符合题意。

这里直接说下PC下如何写一个Word类软件吧,毕竟Word也是一个巨型富文本编辑器的集大成者了。

本人的资料都是从网上可以找到的,大家尽情享用。简单的说下目录

富文本编辑器大概分这几个部分

IO

先说下IO吧。

毕竟一个文件格式的相关编辑保存是最基础的部分了。这里就直接拿Word来举例吧。

首先Word支持最主流的两种格式

首先Word的标准是2008年开始成为OOXML标准的。

OOXML标准学名为 - ECMA 376

ECMA 376

标准链接地址:

h ttps://www.ecma-international.org/publications-and-standards/standards/ecma-376/

看官网描述,ECMA总共经历了四个版本

目前官网最新的则是第五个版本

5th edition, December 2021

这个标准还有个关键的时间节点,即2008年的第二个版本 ECMA-376, 2nd edition,

这一年微软的OOXML成为了国际标准,将开源界主推的ODF比了下去。

December 2008

基于这个时间节点,Office2007的发布日期是什么时候呢?

Initial release January 30, 2007; - by 维基百科

所以,大家也尽量不要使用这个版本的Office。有可能会出现兼容问题。

举个例子

比如说,我有一个文档里面有这些内容

word如何调出开发工具(写一个富文本编辑器需要准备什么)(1)

我们解压这个文件。

word如何调出开发工具(写一个富文本编辑器需要准备什么)(2)

会发现他的文档结构是这个样子的

word如何调出开发工具(写一个富文本编辑器需要准备什么)(3)

那么123这串文字流在哪呢

你会看到123在 rPr 这个标签里,那么 rPr 是啥意思呢? 我们打开这个标准

rPr (Run Properties for the Paragraph mark)

This element specifies the set of run properties applied to the glyph used to represent the physical location of the paragraph mark for this paragraph. This paragraph mark, being a physical character in the Document, can be formatted, and therefore shall be capable of representing this formatting like any other character in the document.

If this element is not present, the paragraph mark is unformatted, as with any other run of text.

简单的说呢,这个 rPr 是一个段落标记位。用于表示一个段落的位置。

Part 1的第一部分的PDF版本总共5039页。

做一个Word编辑器,需要都理解并且IO,内核,排版,绘制全都支持。

大家知道为啥Word是一个工业软件了吧。而且这只是一种格式。

那么OOXML的标准是有了,那么二进制呢。即Doc格式

Doc

Doc格式这几年,微软也是开放了标准

h ttps://learn.microsoft.com/en-us/openspecs/office_file_formats/ms-doc/ccd7b486-7881- 4 84c-a137-51170af7cc22

大家可以从这里下载最新的Doc格式。

简单的来说,Doc格式实际上是一串二进制流。 规定某些字段表示某种属性。实际上每次调试Doc这种格式的代码,我都是比较头疼的。

因为看二进制流还是相当费劲的。

基本上OOXML支持的东西,Doc都支持。

但是毕竟Doc太老了,所以遇到一些新的功能,你会发现打开一些样张,WPS or Word会隐藏一些入口。

比如SmartArt

word如何调出开发工具(写一个富文本编辑器需要准备什么)(4)

你打开一个doc格式,是不支持插入SmartArt的。

但是你另存为Docx,就又出来了。

word如何调出开发工具(写一个富文本编辑器需要准备什么)(5)

同理,Word也是同样的行为。打开个Office365试试

word如何调出开发工具(写一个富文本编辑器需要准备什么)(6)

你会发现很多入口也都置灰了。也并没有完全支持SmartArt

当然,这只是简单的做了个IO的介绍。

下一章,就用IO举的这个例子,来举内核的例子了。

,