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!
In Angular12 und davor können Sie
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…
当然 你也可以选择将作者的源代码移入自己的本地代码中 这也是完全没有问题的
你只需要移动 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.tstypes.ts
Sie müssen nur die sechs Dateien verschieben im lib-Verzeichnis und behandeln Sie sie als Einfach ein Modul in Ihrem eigenen Projekt verwenden
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 &#39;monaco-editor&#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: &#39;visible&#39;,
},
mouseWheelZoom: true,
contextmenu: false,
fontSize: 16,
scrollBeyondLastLine: false,
smoothScrolling: true,
cursorWidth: 0,
renderValidationDecorations: &#39;off&#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;"><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
}</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!
