在网站开发中，文本输入和编辑如何在网络上工作？虽然这个过程看起来很简单，但在其看似简单的背后有很多技术上的细微差别。今天深圳尼高网站设计公司就和大家分享下如何为网站开发文本编辑器。

文本小部件是一个文本输入字段，用户可以在其中使用编辑器中的一系列控件设置文本样式。每个控件都将 CSS 属性应用于文本。从用户的角度来看，它看起来像是一个用于输入文本的普通字段，但其看似简单的背后却隐藏着大量复杂的流程。有几种方法可以在 Web 上实现文本输入字段。我们可以使用简单的文本字段，或多行textarea元素，或contenteditable使输入可编辑的属性，或document.designMode = on. 它们有何不同？

如果您需要一次编辑整个页面，您可以使用document.designMode. 此模式允许编辑给定文档中的任何元素，甚至是iframe.我们选择了contenteditable包含所有必要的文本编辑功能的属性。使用此属性，页面上的任何文本都可以编辑，如果我们想让人们使用 CSS 设置文本样式，这一点非常重要。例如，用户可以直接设置选定部分或整个文本的样。

通过提供对 CSS 开箱即用的所有选项的访问，我们使用户能够以他们希望的任何方式设置文本样式。除了众所周知的属性（例如字体、样式、颜色和装饰）之外，我们还为用户提供了使用OpenType 字体功能的机会，例如连字、样式集、分数等。这些功能通过font-feature-settingsCSS 属性起作用，允许用户自定义文本样式。

除了注册值（wght、wdth、slnt等），字体制作者还可以创建自己独特的字体特征（如上例所示）。为了让我们的用户有机会使用所有可能的字体功能，我们首先需要此信息。

您要使用的所有功能都应在字体文件中定义。让我们看看它的规格。每种字体都可以以表格的形式表示，提供渲染其字符时使用的所有不同信息。

我们使用两个表来收集有关字体的信息：

字形替换表字形替换表

( GSUB) 包含一个字形渲染数据列表。该对象是字体特征及其属性的枚举。您可以在 GitHub 上查看表格中的数据示例。在此表中，该字段是最有趣的。这是字体功能的名称，表示此字体可使用此功能。我们可以安全地在物业中使用。GSUB.featureListtagtagfont-feature-settings

字体变化表

字体变化表(fvar) 是与字体关联的变量属性的表示。GitHub 上也提供了该表的示例。每个对象都是一个字体属性，带有对可能值（min、、max默认值）和本地化名称（如果有）的描述。我们将这些值与font-variation-settings属性一起使用。

借助这两个表，我们可以满足所有需求：使用可变字体属性和各种字体特征。结果数据显示在编辑器的文本小部件控件中，用户可以在其中设置文本样式而无需使用任何代码。

文本输入是文本小部件用户体验的最重要方面之一。除了启用处理文本的快捷方式外，我们还必须应对一些不寻常的挑战。使用箭头键导航文本绝对是其中之一。

文本选择可帮助用户查看当前正在编辑的文本。让我们尝试一个简单的例子：一个带有按钮的输入字段来控制文本的粗细。在这个例子中，我们可以选择一段文本并按下Bold按钮，然后文本中的选择将保留。但是如果我们的例子更复杂怎么办？假设我们向文本大小选择器添加了一个输入字段。在这种情况下，焦点将转移到新的输入。

解决此问题有两种选择：

在每个输入事件之后，我们强制焦点移回文本块。在这种情况下，选择会在一定数量的输入事件后开始闪烁——我们不希望这样。我们可以将文本块添加到iframe. 您可能知道， aniframe有自己的全局window对象。因此，只要选择在 范围内iframe，即使焦点在外部移动，它也会持续存在。

我们最终得到了一个iframe-wrapped 文本小部件。因此，只要选择在 范围内iframe，即使焦点在外部移动，它也会持续存在。看看下面的截图。我们在页面上有两个选择：文本小部件中的选定片段和控件中文本大小的选定值。