Draft 文档翻译 - 高级主题 - 问题和陷阱

本文介绍Draft编辑器框架的一些已知问题，以及我们在使用Facebook框架时遇到的一些常见错误。

用于单向数据管理的常见模式是使用setTimeout或其他机制批量或以其他方式延迟对数据存储的更新。 商店更新,然后发送更改到相关的React组件以传播重新呈现。

然而，当使用 Draft 编辑器将延迟引入到React应用程序时，可能会导致重大的交互问题。 这是因为编辑器期望立即更新并呈现与用户的打字行为保持同步。 延迟可以防止更新通过编辑器组件树传播，这可能导致击键和更新之间断开连接。

为避免这一点，仍然使用延迟或批处理机制，您应该将延迟行为与编辑器状态传播分开。 也就是说，您必须始终允许您的EditorState无延迟地传播到编辑器组件，并独立执行不影响编辑器组件状态的批量更新。

Draft框架包括一些旨在与编辑器一起使用的CSS资源，可通过构建Draft.css在单个文件中提供。

渲染编辑器时应包括此CSS，因为这些样式设置文本对齐，间距和其他重要功能的默认值。 没有它，您可能会遇到块定位，对齐和光标行为的问题。

如果您选择独立于Draft.css编写自己的CSS，则很可能需要复制大部分默认样式。

因为浏览器无法访问OS级别的自定义键绑定，因此无法拦截不映射到默认系统密钥绑定的编辑意图行为。

这样做的结果是使用自定义键绑定的用户可能会遇到草稿编辑器的问题，因为它们的key command可能不会像预期的那样运行。

与任何React应用程序一样，修改DOM的浏览器插件和扩展程序可能会导致Draft编辑器中断。

例如，语法检查器可能会修改contentEditable元素中的DOM，添加下划线和背景等样式。 由于如果浏览器不符合其期望，React无法调和DOM，编辑器状态可能无法与DOM保持同步。

某些旧的广告拦截器也被称为打破原生DOM Selection API - 一个坏主意，无论什么！ - 由于Draft依赖于此API来维护受控选择状态，这可能会导致编辑器交互的麻烦。

从IE11起，Internet Explorer会以某些国际输入法显示出显着的问题，最显着的是韩国输入。

一些 Draft 的代码及其依赖关系使用了ES2015语言特性。 类草案中的语法功能在草拟构建时通过Babel进行编译，但不包括现在包含在许多现代浏览器中的API的polyfills（例如：String.prototype.startsWith）。 我们希望您的浏览器可以原生支持这些API，也可以在polyfill的帮助下进行支持。 一个这样的polyfill是es6-shim，我们在许多例子中使用，但是如果你的场景更多，
你可以自由地使用babel-polyfill。

使用polyfill / shim时，您应尽早将其包含在应用程序的入口点（至少在导入草稿之前）。 例如，使用创建反应应用程序和定位ie11，src / index.js可能是导入您的polyfill的好地方：

import 'babel-polyfill';
// or
import 'es6-shim';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Draft.js正在向完整的移动支持转移，但目前还没有正式支持移动浏览器。有一些已知的问题影响Android和iOS - 看到标记为“android”或“ios”的问题的当前状态。