Eine kurze Analyse der Verwendung des Monaco-Editors in Angular

Wie verwende ich den Monaco-Editor in

angular? Der folgende Artikel dokumentiert die Verwendung des Monaco-Editors in Angular, der kürzlich in einem Unternehmen verwendet wurde. Ich hoffe, dass er für alle hilfreich sein wird!

Abhängigkeiten installieren

In Angular12 und davor können Sie

• monaco-editor
• ngx-monaco-editor

auswählen. Dies ist kein Problem, aber wenn Sie eine höhere Version verwenden, meldet Angular Ein Fehler bei der Verwendung von npm zur Installation des ngx-monaco-editors. [Verwandte Tutorial-Empfehlung: „AngularJS-Video-Tutorial“]

Da der ursprüngliche Autor offenbar die Pflege dieser Bibliothek eingestellt hat, ist die endgültige Unterstützung bei der Angular12-Version geblieben

Natürlich können Sie sich dafür entscheiden, sie zu verwenden wie aufgefordert - -force oder --legacy-peer-deps, um das Problem zu lösen

Aber um einige versteckte Probleme zu beseitigen/zu vermeiden, habe ich die Winkelunterstützung des Frameworks basierend auf der Arbeit des ursprünglichen Autors auf 14 aktualisiert und werde sie weiterhin aktualisieren

@rickzhou /ngx-monaco-editor@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 目录下的六个文件 然后把它们当成自己项目中的一个 module 去使用就好了

使用

其实所有的 api 都可以在 editor.api.d.ts

github github.com/rick-chou/n…

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

Natürlich können Sie auch wählen, dass es kein Problem ist, den Quellcode des Autors in Ihren eigenen lokalen Code zu verschieben

editor.component.ts

editor.module.ts

types.ts

github.com/rick-chou/n…

Sie müssen nur die sechs Dateien verschieben im lib-Verzeichnis und behandeln Sie sie als Einfach ein Modul in Ihrem eigenen Projekt verwenden

🎜🎜Verwenden🎜🎜🎜🎜Tatsächlich sind alle APIs im editor zu finden. api.d.ts code> Suchen Sie 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 在这个editor下就可以找到所有TS类型 import { editor } from &amp;#39;monaco-editor&amp;#39;;</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜 in dieser Datei und notieren Sie die häufig verwendeten Einstellungen 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// eg export const READ_EDITOR_OPTIONS: editor.IEditorOptions = { readOnly: true, automaticLayout: false, minimap: { enabled: false, }, renderFinalNewline: false, scrollbar: { vertical: &amp;#39;visible&amp;#39;, }, mouseWheelZoom: true, contextmenu: false, fontSize: 16, scrollBeyondLastLine: false, smoothScrolling: true, cursorWidth: 0, renderValidationDecorations: &amp;#39;off&amp;#39;, colorDecorators: false, hideCursorInOverviewRuler: true, overviewRulerLanes: 0, overviewRulerBorder: false, };</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜2. Holen Sie sich die aktuelle Cursorposition 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;ngx-monaco-editor [options]=&quot;readEditorOptions&quot; [(ngModel)]=&quot;originLogVal&quot; (onInit)=&quot;initViewEditor($event, false)&quot;&gt; &lt;/ngx-monaco-editor&gt; public initViewEditor(editor: editor.ICodeEditor): void { // 这个editor就是实例 // 下面方法中的editor就是这里的editor this.editor = editor }</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜4 . Den aktuell mit der Maus ausgewählten Text abrufen 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>editor.getPosition()</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜 5. Die angegebene Zeile in die Mitte des visuellen Bereichs scrollen🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>editor.getModel().getValueInRange(editor.getSelection());</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜8. Snapshots speichern/wiederherstellen 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>editor.setPosition({ column: 1, lineNumber: 1, });</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜9. Eine Veranstaltung blockieren🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>editor.revealLineInCenter(1);</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung des Monaco-Editors in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!