您好,登錄后才能下訂單哦!
今天小編給大家分享一下angular如何使用monaco-editor的相關(guān)知識點,內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在 angular12 及之前你可以選擇
monaco-editor
ngx-monaco-editor
這是沒有問題的 但是如果你使用了更高版本的 angular 在使用 npm 安裝 ngx-monaco-editor 時 會報錯。
因為原作者似乎已經(jīng)停止了對這個庫的維護 最終的支持停留在了 angular12 版本
當(dāng)然 你選擇可以選擇正如提示那樣 用 --force 或者 --legacy-peer-deps 來解決問題
但是為了 消除/避免 隱藏的一些問題 我在原作者的基礎(chǔ)上將框架的 angular 支持提升到了 14 并且會一直更新
當(dāng)然 你也可以選擇將作者的源代碼移入自己的本地代碼中 這也是完全沒有問題的
base-editor.ts 引入 monaco-editor
config.ts
diff-editor.component.ts
editor.component.ts
editor.module.ts
types.ts
你只需要移動 lib 目錄下的六個文件 然后把它們當(dāng)成自己項目中的一個 module 去使用就好了
其實所有的 api 都可以在 editor.api.d.ts
這個文件中找到
// 在這個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實例
<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、獲取當(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、滾動指定行到可視區(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、阻止某個事件
// 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)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。