Angular で Monaco エディターを使用する方法の簡単な分析

angular で monaco エディタを使用するにはどうすればよいですか?以下の記事は、最近業務で使用したangularでのmonaco-editorの使い方を記録したものですので、皆様のお役に立てれば幸いです。

#インストールの依存関係

angular12 以前では選択できます

# #monaco-editor

• ngx-monaco-editor
• これは問題ありませんが、より高いバージョンの angular を使用している場合は、npm を使用して ngx-monaco-editor をインストールする必要があります。 . エラーを報告します。 [関連チュートリアルの推奨事項: "

angularjs ビデオ チュートリアル

"]元の作成者がこのライブラリのメンテナンスを停止したようであるため、最終サポートは angular12 バージョンのままです

#もちろん、問題を解決するためにプロンプ​​トが表示されたら --force または --legacy-peer-deps を使用することを選択できます。

しかし、いくつかの隠れた問題を排除/回避するために、これを元の作成者のものに追加しました 基本的に、フレームワークの角度サポートは 14 にアップグレードされ、継続的に更新されます

@rickzhou/ngx-monaco-editor

##github

github.com/rick-chou/n…

npm

www.npmjs.com/package/@ri …

もちろん、作成者のソース コードを自分のローカル コードに移動することも選択できます。これはまったく問題ありません。

base-editor.ts で紹介されています。 monaco-editor

config.ts

• diff-editor.component.ts
• editor.component.ts
• editor.module.ts
• types.ts

##github.com/rick-chou/n…

lib ディレクトリを移動するだけです。6 つのファイルをダウンロードして、独自のプロジェクトのモジュールとして使用するだけです。

Use

In実際、すべての API はファイル editor.api.d.ts

// 在这个editor下就可以找到所有TS类型
import { editor } from 'monaco-editor';

にあります。以下は一般的に使用される

1 設定の記録です。

// 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、および取得エディタの例

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

public initViewEditor(editor: editor.ICodeEditor): void {
  // 这个editor就是实例
  // 下面方法中的editor就是这里的editor
  this.editor = editor
}

3. 現在のカーソル位置を取得します

editor.getPosition()

4. マウスによって現在選択されているテキストを取得します

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

5. カーソル位置を変更します

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

6、指定された行をビジュアル領域の中央までスクロールします

editor.revealLineInCenter(1);

7、イベントをバインド

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

8、保存/復元しますスナップショット

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

9、イベントをブロック

// eg 组件默认的搜索快捷键
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 エディターを使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。