@fluentui/ react-monaco-编辑器
基于摩纳哥的文字类型+ 以完整的打字支持进行响应活代码编辑器. 本文主要针对下列内容: 流利的UI React网站 (单位:千美元)之前的办公室 UI 纤维反应),但它也可以配置成与其他图书馆合作.
警报: 编辑器组件的 API 仍然 极不稳定,所以这个 不应该 用于Fluent UI React repo 系统外.
特征
实时更新为用户类型
当用户编辑类型脚本+ 反应示例代码,将转录到页面上.
键入支持
默认情况下,编辑器会为React和Fluent UI React加载类型. 也可以被配置为装入任何软件包的类型.
延迟加载
摩纳哥的代码非常大,应该在主页内容准备好后加载. 当与Webpack一起消耗时,这个包裹会处理摩纳哥的延迟装入.
在不支持的浏览器中只读渲染
如果用户的浏览器不能支持编辑器(主要是IE 11和一些移动浏览器),则代码将只被读取.
设置
遵循 Web 软件包和运行时间配置指令 @fluentui/monaco-editor 读取我。请注意,为了方便起见,所使用的帮助者将从该包中再出口:
addMonacoWebpackConfig: 从@fluentui/react-monaco-editor/scripts/addMonacoWebpackConfigconfigureEnvironment财务报告和审定财务报表IMonacoConfig: 从@fluentui/react-monaco-editor
然后在下面选择一个API选项来渲染编辑器.
API 选项
此软件包为渲染摩纳哥编辑器和/或TypeScript+提供了多个选项 反应为例.
请注意: 仍可更改 直到一个主要的释放.
EditorWrapper: 全编辑器 + 示例渲染
EditorWrapper 使摩纳哥编辑器、提供实例的容器和有出错的电文栏(如适用)。 作为用户类型, EditorWrapper 转录更新的示例组件代码, evals it, 并重报示例组件.
如果用户的浏览器不能支持编辑器,则代码将只被读取.
TODO: 添加使用示例
TsxEditor: 编辑器 + transpile/ eval 示例
TsxEditor 就像是 EditorWrapper,但没有示例容器、出错栏或只读倒置。 而不是把例子本身,它需要 onTransformFinished 调用以将示例组件传递给父公司进行渲染.
此选项的说明 :
- 你应该 延迟负载 页:1
TsxEditor防止摩纳哥被拉入主包.TsxEditor不包含在@fluentui/react-monaco-editor/lib/index由于进口摩纳哥。 它应该从@fluentui/react-monaco-editor/lib/TsxEditor换句话说.
- 渲染示例组件时, 请确定将其包裹在一个错误边界; 否则 示例中的运行时间错误会崩溃页面。 (一个选项是使用
EditorErrorBoundary,它也处理显示变换错误。 )
TODO: 添加使用示例
Editor: 只编辑器
Editor 只有摩纳哥。 它与任何语言一起工作,不做任何额外的TypeScript设置.
请注意,如果你选择了这个选项,你应该 延迟负载 页:1 Editor 防止摩纳哥被拉入主包。 (Editor 不包含在 @fluentui/react-monaco-editor/lib/index 由于进口摩纳哥。 它应该从 @fluentui/react-monaco-editor/lib/Editor 改为. )
TODO: 添加使用示例
高级用途
TODO: 添加自定义打字和全局的示例, 以及关于示例代码要求的信息