首页 新闻 会员 周边

angular: ngx-monaco-editor 换成 ngx-monaco-editor-v2 后遇到的问题

0
悬赏园豆:30 [已解决问题] 解决于 2024-04-10 11:45

由于 ngx-monaco-editor 不支持 angular 17,将其换成了 ngx-monaco-editor-v2,却发现无法正常使用,没有出现 monaco-editor,model 的内容也没有显示,Component 代码如下

Component template:

<ng-container *ngIf="model">
    <ngx-monaco-editor class="h-100"
                        (onInit)="onEditorInitialized()"
                        [options]="{ model, readOnly: true }"></ngx-monaco-editor>
</ng-container>

Component ts:

export class CommitContentComponent implements OnInit {
    protected model?: NgxEditorModel;
    ngOnInit(): void {
        this.model = {
            value: 'Hello, World!',
            language: 'markdown',
        };
    }
}
dudu的主页 dudu | 高人七级 | 园豆:31048
提问于:2024-04-07 20:44
< >
分享
最佳答案
0

终于解决了!是 baseUrl 引起的,需要将 /assets/monaco-editor/min/vs 改为 /assets

@NgModule({
    imports: [
        MonacoEditorModule.forRoot({
            baseUrl: environment.assets.monacoBase,
        })
    ]
}
const assets = {
    monacoBase: '/assets'
};
dudu | 高人七级 |园豆:31048 | 2024-04-10 11:45

还有一个地方需要修改,在 angular.json 中将 monaco-editor 的输出路径改为 assets/monaco

即将

{
    "glob": "min/**/*",
    "input": "node_modules/monaco-editor",
    "output": "assets/monaco-editor"
}

改为

{
    "glob": "min/**/*",
    "input": "node_modules/monaco-editor",
    "output": "assets/monaco"
}
dudu | 园豆:31048 (高人七级) | 2024-04-10 12:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册