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"

代码演示

基本

最简单的用法。

expand codeexpand code
加载中
Diff 编辑器

使用 diff 模式。

expand codeexpand code
加载中

Change Theme

修改配置

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

expand codeexpand code
加载中
完全受控模式

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

expand codeexpand code
加载中

Loading

复杂

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

expand codeexpand code
加载中

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 插件。

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

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

nz-code-editor#

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

方法#

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

全局配置#

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

CodeEditorConfig#

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