TdCode编辑器 组件: td-code-编辑器
<td-code-editor> 用于基于 Covalent 和 Monaco 编辑的代码编辑组件。 该组件可以在Electron和Web浏览器中运行.
API 总结
投入
- 值 ?: 字符串
- 代码编辑器实例的值
- 语言 ? : 字符串
- 编辑器实例中用于语法的语言
- 注册语言?: 函数( )
- 在编辑器中注册自定义语言
- 编辑器Style?: 字符串
- 对编辑容器应用了额外的样式
- 主题? : 字符串
- 用于编辑器样式的主题
- 编辑选项? : 对象
- 布局 ?: 函数( )
- 指示编辑器重新测量容器
属性
- 是福尔斯克林吗
- 编辑器目前为全屏模式
- 完全ScreenKeyBinding?:数字
- 将短切的密钥代码设置为全屏。 列出的选项参见这里 : https://microsoft.github.io/monaco-editor/api/enums/monaco.keycode.html 互联网档案馆的存檔,存档日期2013-12-22
活动
- 编辑器已初始化吗 ?: 函数( $event)
- 编辑器初始化完成后发送 。 事件传递一个引用到实际编辑器实例,可用于调用Angular组件外的额外操作.
- 编辑器已更改 ?: 函数( $event)
- 当编辑器的配置改变时发送
- 编辑器变换?: 函数( $event)
- 当编辑器语言发生变化时被发送
安装
此组件可以被安装为npm包.
npm install @covalent/code-editor
设置
由于摩纳哥已知的一期 编辑版0.2.0 https://github.com/microsoft/monaco-editor/issues/1842 (中文(简体) ) 使用 monaco 编辑器的0.17.1 版本.
如果您注意到图标存在不加载的问题, Css- loader 有已知的问题, 它无法正确加载文件字体 https://github.com/microsoft/monaco-editor/issues/2742 (英语) 降级为 [email protected]。 。 。 .
我们利用摩纳哥编辑的无害环境管理。 要包含此构件, 您必须使用自定义的网页包 。 见 https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-em.md 互联网档案馆的存檔,存档日期2013-12-21 更多信息.
安装 Webpack 自定义构建器 .
npm install --save-dev @angular-builders/custom-webpack
安装摩纳哥编辑器 Webpack 扩展插件 .
npm install --save-dev monaco-editor-webpack-plugin
使用 Monaco Editor Webpack 插件创建 Webpack 配置文件 。 语言和特性可以包含/排除,以控制由此而来的图像大小.
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
// target should only be specified when including component in Electron app
target: 'electron-renderer',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader'],
},
{
test: /\.ttf$/,
type: 'asset/resource',
},
],
},
plugins: [
new MonacoWebpackPlugin({
languages: ['css', 'html', 'javascript', 'sql', 'typescript'],
features: ['contextmenu', 'clipboard', 'find'],
}),
],
};
如果使用Webpack 4或更低,则需要使用文件装入器,而不是像下面的代码那样使用资产模块:
{
test: /\.ttf$/,
use: ['file-loader']
}
注意:如果将这个组件纳入到电子应用程序中,请定义电子还原器目标. 参见这里的电子示例: https://github.com/Teradata/covalent-electron/blob/main/monaco-webpack.config.js 互联网档案馆的存檔,存档日期2014-12-22
引用您的 angular.json 构建配置中的 Webpack 文件 .
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./monaco-webpack.config.js",
"mergeStrategies": {
"module.rules": "prepend"
}
},
...
导入 共价代码编辑器模块 在您的 NGMudule 中:
import { CovalentCodeEditorModule } from '@covalent/code-editor';
@NgModule({
imports: [
CovalentCodeEditorModule,
...
],
...
})
export class MyModule {}
示例
<td-code-editor [style.height.px]="200" editorStyle="border:0;" flex theme="vs" language="sql" [editorOptions]="{readOnly:true, fontSize:20}" [(ngModel)]="model" (ngModelChange)="callBackFunc()"> </td-code-editor>
运行单元测试
运行 nx test angular-code-editor 执行单元测试.