Code Editor代码编辑器

NG-ZORRO 实验性功能是指已发布但不稳定或者还未准备好用于生产环境的功能。
开发者或用户可以选择在正式发布前使用这些功能，但是每次发布版本时都可能存在 breaking changes。

何时使用#

需要在网页上渲染 monaco editor 时使用。

引入模块#

import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';

引入样式#

@import "node_modules/ng-zorro-antd/code-editor/style/entry.less"

代码演示

基本

最简单的用法。

加载中

Diff 编辑器

使用 diff 模式。

加载中

Change Theme

修改配置

可以在运行时修改编辑器的默认配置，和页面上编辑器的配置。

加载中

完全受控模式

使用完全受控模式，自行管理 monaco editor 的 TextModel。

加载中

复杂

带加载效果和工具条的更复杂的例子。

加载中

API#

别忘记先安装 monaco editor：

npm install monaco-editor

动态加载#

如果你使用动态加载，你就需要在运行时加载 monaco editor 本身的资源。

在 angular.json 中添加：

"assets": [
+ {
+   "glob": "**/*",
+   "input": "./node_modules/monaco-editor/min/vs",
+   "output": "/assets/vs/"
+ }
],

这样就 OK 了！CodeEditor 组件在需要加载 monaco editor 时自动去 /assets/vs/ 目录下查询。

如果你的静态资源都部署在 CDN 上，你就无须修改 angular.json 文件，但你必须通过 NzConfigService 配置 assetsRoot 属性。例如你将 monaco editor 的资源放置在了 https://mycdn.com/assets/vs ，你就需要传递 { assetsRoot: 'https://mycdn.com/assets' } 。

如果你使用静态加载，你就无需修改 angular.json 文件，详见下文。

静态加载#

有时候你可能需要在运行时加载 AMD module，但 monaco editor 的加载文件 loader.js patch 了 window[require] 属性，导致你无法使用 requireJS 等模块加载库，这时，你可以启用静态加载功能。

方法是使用 Microsoft 提供的 monaco-editor-webpack-plugin 插件。

在 app.module 中提供 NZ_CONFIG 的值，并设置 codeEditor 属性下的 useStaticLoading 为 true 。
创建一个 webpack.partial.js 文件，根据插件文档进行相应的配置。
使用自定义脚本加载器，例如 ngx-build-plus，在打包时加载这个 webpack 配置。

使用静态加载时，你无需在 angular.json 文件中注册 monaco editor 的资源。

nz-code-editorcomponent#

参数	说明	类型	默认值
`[nzEditorMode]`	编辑器的模式	`normal`\|`diff`	`normal`
`[nzLoading]`	加载中	`boolean`	`false`
`[nzOriginalText]`	Diff 模式下，左半边的文本内容	`boolean`	`false`
`[nzFullControl]`	完全控制模式，此模式下组件不会帮助用户处理 `TextModel`，用户应当自行管理 monaco editor 实例	`boolean`	`false`
`[nzEditorOption]`	编辑器选项，参考 monaco editor 的定义	`IEditorConstructionOptions`	`{}`
`[nzToolkit]`	暴露快捷操作	`TemplateRef<void>`	-
`(nzEditorInitialized)`	当编辑器组件初始化完毕之后派发事件	`IStandaloneCodeEditor` \| `IStandaloneDiffEditor`	-

方法#

名称	描述
`layout()`	强制组件重新渲染

全局配置#

你可以通过 NzConfigService 的 set 方法，设置 CodeEditor 组件的默认配置。

CodeEditorConfig#

属性	说明	类型	默认值
`assetsRoot`	组件加载 monaco editor 资源文件的位置	`string` \| `SageUrl`	-
`defaultEditorOption`	默认的编辑器设置，参考 monaco editor 的定义	`IEditorConstructionOptions`	`{}`
`onLoad`	当 monaco editor 资源加载完毕时触发的钩子，此时全局对象 `monaco` 可用	`() => void`	-
`onFirstEditorInit`	当第一个编辑器请求初始化时触发的钩子	`() => void`	-
`onInit`	每个编辑器请求初始化时触发的钩子	`() => void`	-
`useStaticLoading`	使用静态加载	`boolean`	`false`