angular7 中如何使用自己的monaco编辑器（vscode）

最新推荐文章于 2024-08-16 08:28:18 发布

Ghost_02

最新推荐文章于 2024-08-16 08:28:18 发布

阅读量3.7k

点赞数 2

分类专栏：前端文章标签： angular

本文链接：https://blog.csdn.net/Ghost_leader/article/details/86667965

版权

本文介绍了如何在Angular7应用中集成Monaco Editor，打造类似VSCode的Web编辑器体验。通过引入ngx-monaco-editor库，配置模块和组件，并利用[(code)]属性捕获编辑器内容。

摘要由CSDN通过智能技术生成

vscode 是一款很装逼的编辑器，如果将其移至进到web浏览器就更牛逼了。

参考 https://github.com/materiahq/ngx-monaco-editor

ng new monaco-editor-demo
cd monaco-eidtor-demo
# 开始安装
npm install @materia-ui/ngx-monaco-editor --save

# 添加资源
{
    ...
    "projects": {
      "YOUR_APP_NAME": {
          ...
          "architect": {
              "build": {
                ...
                "options": {
                    ...
                    "assets": [
                        { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor/" }
                    ],
                    ...
                }
                ...
              }
            }
            ...
        }
    },
    ...
}

开始导入主模块的功能包。（app.module.ts）