获取选中内容
1.刚开始使用的是浏览器的默认事件，但是当获取多行的内容时，自动隐藏内容，所以自己写了一个比较笨的第二种方法，但是第一种方法可以应用于其他的文本框
//获取文本框选中内容
window.getSelection().toString();
2.monaco editor实例调用鼠标按下，光标改变的方法，获取起始行，列，结束行，列，通过截取编辑器内容的方法获取当前选中的内容
this.monacoEditor.onMouseDown(e => {
this.startLineNumber = e.target.position.lineNumber;//获取起始行
this.startColumn = e.target.position.column;//获取起始列
})
this.monacoEditor.onDidChangeCursorPosition(e => {
//编辑器内容changge事件
this.endLineNumber = e.position.lineNumber;//获取结束行
this.endColumn = e.position.column;//获取结束列
let { startLineNumber, startColumn, endLineNumber, endColumn } = this
this.currentText = currentFn(
this.monacoEditor,
startLineNumber,
startColumn,
endLineNumber,
endColumn
)
})
被调用的currentFn.js
export function currentFn(monacoEditor, startLineNumber, startColumn, endLineNumber, endColumn) {
let currentText = '' //选中文字的内容
let num = 0;//累计回车的数量
let startIndex = null;//截取编辑器内容的起始下标
let endIndex = null;//截取编辑器内容的结束下标
// monacoEditor.getValue().split('') : 获取编辑器内容，并拆成数组，并把每一个字符作为数组的每一项
if (startLineNumber < endLineNumber) {//当起始行<结束行（方向：从上到下，从左到右）
monacoEditor.getValue().split('').map((item, index) => {
if (startLineNumber === 1) {//判断起始行当前行数，为1 则前面没有回车
startIndex = startColumn - 1;//获取起始下标
if (item === '\n') {
num += 1；//累计回车数量（针对于结束行）
if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
endIndex = index + endColumn
}
}
} else {//判断起始行当前行数，大于1 则前面有回车
if (item === '\n') {//累计回车数量
num += 1
if (num === startLineNumber - 1) {//获取起始行最近的回车的下标+起始行的起始列
startIndex = index + startColumn
}
if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
endIndex = index + endColumn
}
}
}
})
} else if (startLineNumber > endLineNumber) {//当起始行>结束行（方向：从下到上，从右到左）
monacoEditor.getValue().split('').map((item, index) => {
if (endLineNumber === 1) {//判断结束行当前行数，为1 则前面没有回车
startIndex = endColumn - 1;//获取起始下标
if (item === '\n') {
num += 1;//累计回车数量（针对于起始行）
if (num === startLineNumber - 1) {//获取结束下标：起始行最近的回车的下标+起始行的起始列
endIndex = index + startColumn
}
}
} else {//判断结束行当前行数，大于1 则前面有回车
if (item === '\n') {//累计回车数量
num += 1
if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
startIndex = index + endColumn
}
if (num === startLineNumber - 1) {//获取起始行最近的回车的下标+起始行的起始列
endIndex = index + startColumn
}
}
}
})
} else if (startLineNumber === endLineNumber) {//当起始行=结束行（方向：从左到右，从右到左）
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
}
- 借鉴优秀评论补充第三种获取选中编辑器内容的方法
monacoEditor.getModel().getValueInRange(monacoEditor.getSelection())
初始化实例配置
this.monacoEditor = monaco.editor.create(this.$refs.container, {// 编辑器实例化
value:'',
language: 'mysql',//
theme: 'vs', // 主题：vs, hc-black, or vs-dark
scrollBeyondLastLine: false,
readOnly: true,//是否只读
automaticLayout: true,//是否自适应
autoClosingBrackets: true,
foldingStrategy: 'indentation',//代码可分小段折叠
overviewRulerBorder: false, // 不要滚动条的边框
tabSize: 2, // tab 缩进长度
minimap: {
enabled: false, // 不要小地图
},
});
动态设置主题
monaco.editor.setTheme('hc-black');
