TinyMCE - 控制部署文本的字体大小（使用 EM 的字体大小）

Question

我正在使用 TinyMCE 在我开发的网站中进行内容管理。这意味着我的客户可以使用 TinyMCE 编辑器输入格式化文本，然后网站将 html 输出到网站上的适当位置。

我希望将相同的文本放置在具有不同基本字体大小的2个不同位置，因此我不能在TinyMCE中使用绝对单位，因为它不会适应目的地。换句话说，我希望我的客户能够控制文本内的相对大小，并且我希望能够控制整体字体大小。

乍一看，这应该可以通过在 TinyMCE 中使用

em

作为单位轻松解决。但这并不（那么容易）。

它可以在目标端工作，它会根据父元素的大小进行缩放，这是可以的。 但是 TinyMCE 也嵌套元素，因此当您开始使用

em

作为字体大小单位时，您会突然从直观的绝对比例（如 Word 和 pt 单位）转变为相对比例，而相对比例在编辑器中根本不使用，并且对于用户来说非常不直观。

示例：如果我在 TinyMCE 中为客户提供 2 种字体大小 -

1em

和

2em

（而不是

16px

和

32px

）。用户将

2em

应用于 TinyMCE 中的文本，然后选择该文本的子部分，他想要恢复到原始大小...他不能使用直观的

1em

选项，因为正如我所说，TinyMCE 嵌套元素因此

1em

父级的

2em

仍然是“

2em

”。

使用

rem

可以解决这个问题，但会引入尺寸依赖于

html

而不是直接父元素的问题。

我有一些如何解决这个问题的想法，但没有一个是理想的。 有什么想法吗？

Answer 1

使用

css custom properties

解决了这个问题。 基本上通过 TinyMCE 提交的 html 的每个元素都分配了

* {
   font-size: calc(var(--base-font-size, 1rem) * 1);
}

用户选择不同字体大小的元素被分配相同的规则，但不是

1

，而是

1.2

、

1.4

等 - 只是大小的倍数。

html 的根元素（TinyMCE 编辑器和使用文本的目标）将

--base-font-size

设置为您想要的任何大小，并且内部的自定义 html 将相应调整。