今天小編給大家分享一下angular如何使用monaco-editor的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括山亭網(wǎng)站建設(shè)、山亭網(wǎng)站制作、山亭網(wǎng)頁(yè)制作以及山亭網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，山亭網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到山亭省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

安裝依賴

在 angular12 及之前你可以選擇

• monaco-editor

• ngx-monaco-editor

這是沒(méi)有問(wèn)題的 但是如果你使用了更高版本的 angular 在使用 npm 安裝 ngx-monaco-editor 時(shí) 會(huì)報(bào)錯(cuò)。

因?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ì)一直更新

當(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

你只需要移動(dòng) lib 目錄下的六個(gè)文件 然后把它們當(dāng)成自己項(xià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í)例

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

3、獲取當(dāng)前光標(biāo)位置

editor.getPosition()

4、獲取當(dāng)前鼠標(biāo)選中的文本

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

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

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

6、滾動(dòng)指定行到可視區(qū)中間

editor.revealLineInCenter(1);

7、綁定事件

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

8、保存/恢復(fù)快照

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();
  }
});

以上就是“angular如何使用monaco-editor”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。