Une brève analyse de la façon d'utiliser monaco-editor en angulaire

Comment utiliser monaco-editor dans

angular ? L'article suivant enregistre l'utilisation de monaco-editor dans angulaire qui a été utilisé dans une entreprise récente. J'espère qu'il sera utile à tout le monde !

Installer les dépendances

Dans Angular12 et avant, vous pouvez choisir

• monaco-editor
• ngx-monaco-editor

Ce n'est pas un problème mais si vous utilisez une version supérieure, Angular le signalera une erreur lors de l'utilisation de npm pour installer ngx-monaco-editor. [Recommandation de tutoriel associée : "Tutoriel vidéo angulairejs"]

Parce que l'auteur original semble avoir arrêté de maintenir cette bibliothèque, le support final est resté à la version angulaire12

Bien sûr, vous pouvez choisir de l'utiliser comme demandé - -force ou --legacy-peer-deps pour résoudre le problème

Mais afin d'éliminer/éviter certains problèmes cachés, j'ai mis à niveau le support angulaire du framework à 14 en fonction du travail de l'auteur original et je continuerai à le mettre à jour

@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…

Bien sûr, vous pouvez également choisir Ce n'est pas un problème de déplacer le code source de l'auteur dans votre propre code local

base-editor.ts et d'introduire monaco-editor

config.ts

diff-editor.component.ts

editor.component.ts

editor.module.ts

types.ts

🎜🎜🎜github.com/rick-chou/n…🎜🎜🎜Il vous suffit de déplacer les six fichiers dans le répertoire lib et traitez-les comme Utilisez simplement un module dans votre propre projet🎜

🎜🎜Utilisez🎜🎜🎜🎜En fait, toutes les API peuvent être trouvées dans l'éditeur . api.d.ts code> Recherchez 🎜<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">Copier après la connexion</div></div>🎜 dans ce fichier et enregistrez ceux couramment utilisés ci-dessous 🎜🎜1 Paramètres 🎜<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">Copier après la connexion</div></div>🎜2 Obtenez l'instance de l'éditeur 🎜<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">Copier après la connexion</div></div>🎜3 Obtenez la position actuelle du curseur 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">editor.getPosition()</pre><div class="contentsignin">Copier après la connexion</div></div>🎜4. . Obtenez le texte actuellement sélectionné par la souris 🎜<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">Copier après la connexion</div></div>🎜 5. Modifiez la position du curseur🎜<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">Copier après la connexion</div></div>🎜6 Faites défiler la ligne spécifiée jusqu'au milieu de la zone visuelle🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">editor.revealLineInCenter(1);</pre><div class="contentsignin">Copier après la connexion</div></div>🎜7. Lier les événements🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">editor.onMouseDown(event =&gt; { // do something }); editor.onKeyDown(event =&gt; { // do something });</pre><div class="contentsignin">Copier après la connexion</div></div>🎜8. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">const snapshot = editor.saveViewState(); editor.restoreViewState(snapshot);</pre><div class="contentsignin">Copier après la connexion</div></div>🎜9. Bloquer un événement🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// eg 组件默认的搜索快捷键 function isMac() { return /macintosh|mac os x/i.test(navigator.userAgent); } editor.onKeyDown(event =&gt; { if ( (isMac() &amp;&amp; event.browserEvent.key === &amp;#39;f&amp;#39; &amp;&amp; event.metaKey) || (!isMac() &amp;&amp; event.browserEvent.key === &amp;#39;f&amp;#39; &amp;&amp; event.ctrlKey) ) { event.preventDefault(); event.stopPropagation(); } });</pre><div class="contentsignin">Copier après la connexion</div></div>🎜Plus de programmation Pour des connaissances connexes, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!