angular中怎麼使用monaco-editor？以下這篇文章記錄下最近的一次業(yè)務(wù)中用到的 m??onaco-editor 在 angular 中的使用，希望對(duì)大家有幫助！

安裝依賴

#在angular12 及之前你可以選擇

• monaco-editor
• ngx-monaco-editor

這是沒(méi)有問(wèn)題的但是如果你使用了更高版本的angular 在使用npm 安裝ngx-monaco-editor 時(shí)會(huì)報(bào)錯(cuò)誤。 【相關(guān)教學(xué)推薦：《angularjs影片教學(xué)》】

因?yàn)樵髡咚坪跻呀?jīng)停止了對(duì)這個(gè)函式庫(kù)的維護(hù)最終的支援停留在了angular12 版本

#當(dāng)然你選擇可以選擇正如提示那樣用--force 或--legacy-peer-deps 來(lái)解決問(wèn)題

但是為了消除/避免隱藏的一些問(wèn)題我在原作者的基礎(chǔ)上將框架的angular 支援提升到了14 並且會(huì)一直更新

#@rickzhou/ngx-monaco-editor

github github.com/rick-chou/n…

npm www.npmjs.com/package/@ri…

#當(dāng)然你也可以選擇將作者的源代碼移入自己的本地代碼中這也是完全沒(méi)有問(wèn)題的

• base-editor.ts 引入monaco-editor
• config.ts
• diff-editor.component.ts
• editor.component.ts
• editor.module.ts
• types.ts

github.com/rick-chou/n…

你只需要移動(dòng)lib 目錄下的六個(gè)檔案然後把它們當(dāng)成自己專案中的一個(gè)module 去使用就好了

#使用

其實(shí)所有的api 都可以在editor.api.d.ts 這個(gè)檔案中找到

// 在這個(gè)editor下就可以找到所有TS類型
import { editor } from 'monaco-editor';

下面記錄一下常用的

#1、設(shè)定

// eg
export const READ_EDITOR_OPTIONS: editor.IEditorOptions = {
  readOnly: true,
  automaticLayout: false,
  minimap: {
    enabled: false,
  },
  renderFinalNewline: false,
  scrollbar: {
    vertical: 'visible',
  },
  mouseWheelZoom: true,
  contextmenu: false,
  fontSize: 16,
  scrollBeyondLastLine: false,
  smoothScrolling: true,
  cursorWidth: 0,
  renderValidationDecorations: 'off',
  colorDecorators: false,
  hideCursorInOverviewRuler: true,
  overviewRulerLanes: 0,
  overviewRulerBorder: false,
};

2、取得editor實(shí)例

<ngx-monaco-editor
  [options]="readEditorOptions"
  [(ngModel)]="originLogVal"
  (onInit)="initViewEditor($event, false)">
</ngx-monaco-editor>

public initViewEditor(editor: editor.ICodeEditor): void {
  // 這個(gè)editor就是實(shí)例
  // 下面方法中的editor就是這里的editor
  this.editor = editor
}

3、取得目前遊標(biāo)位置

editor.getPosition()

4、取得目前滑鼠選取的文字

editor.getModel().getValueInRange(editor.getSelection());

5、修改遊標(biāo)位置

editor.setPosition({
      column: 1,
      lineNumber: 1,
    });

6 、捲動(dòng)指定行到視覺(jué)區(qū)中間

editor.revealLineInCenter(1);

7、綁定事件

editor.onMouseDown(event => {
  // do something
});
editor.onKeyDown(event => {
  // do something
});

8、儲(chǔ)存/還原快照

const snapshot = editor.saveViewState();
editor.restoreViewState(snapshot);

9、封鎖某個(gè)事件

// eg 組件默認(rèn)的搜索快捷鍵
function isMac() {
  return /macintosh|mac os x/i.test(navigator.userAgent);
}

editor.onKeyDown(event => {
  if (
    (isMac() && event.browserEvent.key === 'f' && event.metaKey) ||
    (!isMac() && event.browserEvent.key === 'f' && event.ctrlKey)
  ) {
    event.preventDefault();
    event.stopPropagation();
  }
});

更多程式相關(guān)知識(shí)，請(qǐng)?jiān)煸L：程式設(shè)計(jì)影片！ ！

以上是淺析angular中怎麼使用monaco-editor的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！