獲取選中內(nèi)容
1.剛開始使用的是瀏覽器的默認(rèn)事件，但是當(dāng)獲取多行的內(nèi)容時(shí)，自動(dòng)隱藏內(nèi)容，所以自己寫了一個(gè)比較笨的第二種方法，但是第一種方法可以應(yīng)用于其他的文本框
//獲取文本框選中內(nèi)容
window.getSelection().toString();
2.monaco editor實(shí)例調(diào)用鼠標(biāo)按下，光標(biāo)改變的方法，獲取起始行，列，結(jié)束行，列，通過截取編輯器內(nèi)容的方法獲取當(dāng)前選中的內(nèi)容
this.monacoEditor.onMouseDown(e => {
this.startLineNumber = e.target.position.lineNumber;//獲取起始行
this.startColumn = e.target.position.column;//獲取起始列
})
this.monacoEditor.onDidChangeCursorPosition(e => {
//編輯器內(nèi)容changge事件
this.endLineNumber = e.position.lineNumber;//獲取結(jié)束行
this.endColumn = e.position.column;//獲取結(jié)束列
let { startLineNumber, startColumn, endLineNumber, endColumn } = this
this.currentText = currentFn(
this.monacoEditor,
startLineNumber,
startColumn,
endLineNumber,
endColumn
)
})
被調(diào)用的currentFn.js
export function currentFn(monacoEditor, startLineNumber, startColumn, endLineNumber, endColumn) {
let currentText = '' //選中文字的內(nèi)容
let num = 0;//累計(jì)回車的數(shù)量
let startIndex = null;//截取編輯器內(nèi)容的起始下標(biāo)
let endIndex = null;//截取編輯器內(nèi)容的結(jié)束下標(biāo)
// monacoEditor.getValue().split('') : 獲取編輯器內(nèi)容，并拆成數(shù)組，并把每一個(gè)字符作為數(shù)組的每一項(xiàng)
if (startLineNumber < endLineNumber) {//當(dāng)起始行<結(jié)束行（方向：從上到下，從左到右）
monacoEditor.getValue().split('').map((item, index) => {
if (startLineNumber === 1) {//判斷起始行當(dāng)前行數(shù)，為1 則前面沒有回車
startIndex = startColumn - 1;//獲取起始下標(biāo)
if (item === '\n') {
num += 1；//累計(jì)回車數(shù)量（針對(duì)于結(jié)束行）
if (num === endLineNumber - 1) {//獲取結(jié)束行最近的回車的下標(biāo)+結(jié)束行的結(jié)束列
endIndex = index + endColumn
}
}
} else {//判斷起始行當(dāng)前行數(shù)，大于1 則前面有回車
if (item === '\n') {//累計(jì)回車數(shù)量
num += 1
if (num === startLineNumber - 1) {//獲取起始行最近的回車的下標(biāo)+起始行的起始列
startIndex = index + startColumn
}
if (num === endLineNumber - 1) {//獲取結(jié)束行最近的回車的下標(biāo)+結(jié)束行的結(jié)束列
endIndex = index + endColumn
}
}
}
})
} else if (startLineNumber > endLineNumber) {//當(dāng)起始行>結(jié)束行（方向：從下到上，從右到左）
monacoEditor.getValue().split('').map((item, index) => {
if (endLineNumber === 1) {//判斷結(jié)束行當(dāng)前行數(shù)，為1 則前面沒有回車
startIndex = endColumn - 1;//獲取起始下標(biāo)
if (item === '\n') {
num += 1;//累計(jì)回車數(shù)量（針對(duì)于起始行）
if (num === startLineNumber - 1) {//獲取結(jié)束下標(biāo)：起始行最近的回車的下標(biāo)+起始行的起始列
endIndex = index + startColumn
}
}
} else {//判斷結(jié)束行當(dāng)前行數(shù)，大于1 則前面有回車
if (item === '\n') {//累計(jì)回車數(shù)量
num += 1
if (num === endLineNumber - 1) {//獲取結(jié)束行最近的回車的下標(biāo)+結(jié)束行的結(jié)束列
startIndex = index + endColumn
}
if (num === startLineNumber - 1) {//獲取起始行最近的回車的下標(biāo)+起始行的起始列
endIndex = index + startColumn
}
}
}
})
} else if (startLineNumber === endLineNumber) {//當(dāng)起始行=結(jié)束行（方向：從左到右，從右到左）
monacoEditor.getValue().split('').map((item, index) => {
if (endLineNumber === 1) {
startIndex = startColumn < endColumn ? startColumn - 1 : endColumn - 1
endIndex = startColumn > endColumn ? startColumn - 1 : endColumn - 1
} else {
if (item === '\n') {
num += 1
if (num === endLineNumber - 1) {
startIndex = startColumn < endColumn ? startColumn + index : endColumn + index
endIndex = startColumn > endColumn ? startColumn + index : endColumn + index
}
}
}
})
}
currentText = monacoEditor.getValue().slice(startIndex, endIndex)
return currentText
}
- 借鑒優(yōu)秀評(píng)論補(bǔ)充第三種獲取選中編輯器內(nèi)容的方法
monacoEditor.getModel().getValueInRange(monacoEditor.getSelection())
初始化實(shí)例配置
this.monacoEditor = monaco.editor.create(this.$refs.container, {// 編輯器實(shí)例化
value:'',
language: 'mysql',//
theme: 'vs', // 主題：vs, hc-black, or vs-dark
scrollBeyondLastLine: false,
readOnly: true,//是否只讀
automaticLayout: true,//是否自適應(yīng)
autoClosingBrackets: true,
foldingStrategy: 'indentation',//代碼可分小段折疊
overviewRulerBorder: false, // 不要滾動(dòng)條的邊框
tabSize: 2, // tab 縮進(jìn)長度
minimap: {
enabled: false, // 不要小地圖
},
});
動(dòng)態(tài)設(shè)置主題
monaco.editor.setTheme('hc-black');
