介绍
@julceswhat/angular5-monaco-editor-loader 是一个基于 Angular 5 和 Monaco Editor 的加载器，可以帮助开发者在 Angular 5 项目中使用 Monaco Editor。
Monaco Editor 是一个非常强大的代码编辑器，它由微软开发，被广泛应用于 VS Code 中。如果你想在你的 Angular 5 项目中使用 Monaco Editor，@julceswhat/angular5-monaco-editor-loader 就是你需要的工具。
安装
@julceswhat/angular5-monaco-editor-loader 可以通过 npm 安装：
npm install --save @julceswhat/angular5-monaco-editor-loader
安装完成后，在你的 Angular 5 项目中添加 Monaco Editor：
-- -------------------- ---- -------
------ - ------------------ - ---- --------------------------------------------
-----------
-------- -
--------------
----------------------------
-
--
------ ----- --------- - -使用
在你的组件中使用 Monaco Editor：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------- - ---- --------------------------------------------
------------
--------- -----------
--------- --------------- -------------------------------
--
------ ----- ------------ -
------ ----- ------ - ---
------------
------- -------------- -------------------------
- - -
---------- -
-- -- ------ ------
--------------------------------------------- -- -
-- ------- ------ ------
--------- - -------------------- -----------
---
-
-操作
当加载器准备好使用 Monaco Editor 时，你可以开始使用它。你可以使用以下操作来控制 Monaco Editor：
获取编辑器对象
使用 ViewChild 获取编辑器元素：
-- -------------------- ---- ------- ------ - ---------- --------- - ---- ---------------- ------ - --------------------- - ---- -------------------------------------------- ------------ --------- ----------- --------- --------------- ------------------------- -- ------ ----- ------------ - -------------------- ------- ---------------------- -
此时我们获取到了整个编辑器对象，你可以通过该对象进行其他的操作。
读取和写入代码
使用 code 属性获取和设置代码：
this.editor.code = '// Hello, world!'; console.log(this.editor.code);
获取选中文本
使用 getSelectedText 方法获取选中文本：
console.log(this.editor.getSelectedText());
获取当前光标位置
使用 getCursorPosition 方法获取当前光标位置：
console.log(this.editor.getCursorPosition());
监听编辑器事件
使用 onInit 方法监听编辑器的初始化事件：
this.editor.onInit.subscribe((event) => {
console.log('Editor initialized!');
});使用 onChange 方法监听代码变化事件：
this.editor.onChange.subscribe((event) => {
console.log('Code changed!');
});使用 onPositionChange 方法监听光标位置变化事件：
this.editor.onPositionChange.subscribe((event) => {
console.log('Cursor position changed!');
});结论
@julceswhat/angular5-monaco-editor-loader 是一个非常有用的工具，可以帮助你在 Angular 5 项目中使用 Monaco Editor。使用这个工具，你可以轻松地创建一个优秀的代码编辑器，同时享受到 Monaco Editor 所提供的许多优秀功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e2442d3