背景
在编辑器中，开发者有时需要在指定位置添加或替换一些文本，比如在文件头部添加版权说明，在文件末尾增加一些辅助信息，
编辑器底层的搜索替换也是在指定位置替换文本。今天这篇文章我们就来谈一谈 如何实现这样一个简单的需求。 在指定位置追加或替换文本。
核心api
使用的核心的api是 model.applyEdits(operations: IIdentifiedSingleEditOperation[]， computeUndoEdits: true): void 该方法是在语言model下，
所以在调用前先使用editor.getModel() 来获取当前的model吧。
applyEdits方法有二个参数，第一个是operations， 它的类型是IIdentifiedSingleEditOperation 。这个参数是一个数组。这表明我们可以在调用这个方法时可以一次完成多次操作，可以执行多次插入和替换。第二个参数computeUndoEdits 是用于是否将本次的操作添加到编辑器的操作栈中，如果为true，那么久可以实现撤销的动作。
下面看下 IIdentifiedSingleEditOperation 的定义
forceMoveMarkers是否强制删除marker。range要操作的一个位置区间，如果起始位置与结束位置相同，表明这次是 在一个位置插入text，如果不是同一个位置，则位置区间会被text替换。text要插入或替换的文本。
那么在替换特定位置文本时我们就可以写
function applyReplace() {
var currentModel = editor.getModel();
currentModel.applyEdits([{
range: {
startColumn: 0, startLineNumber: 1, endColumn: 3, endLineNumber: 9,
},
text: '// @拿我格子衫来'
}], true)
}
交互效果
完整代码
<!DOCTYPE html>
<html>
<head>
<title>Hello World Monaco Editor</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Hello World Monaco Editor</h2>
<button onclick="applyInsert()">在3行2列追加一段代码</button>
<button onclick="applyReplace()">替换1行0列到9行3列</button>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="./monaco-editor/package/min/vs/loader.js"></script>
<script src="./const.js"></script>
<script>
require.config({ paths: { vs: './monaco-editor/package/min/vs' } });
let editor
require(['vs/editor/editor.main'], function () {
editor = monaco.editor.create(document.getElementById('container'), {
value: oldVersion,
language: 'javascript'
});
});
function applyInsert() {
var currentModel = editor.getModel();
currentModel.applyEdits([{
range: {
startColumn: 2, startLineNumber: 3, endColumn: 2, endLineNumber: 3,
},
text: '// @拿我格子衫来'
}], true)
}
function applyReplace() {
var currentModel = editor.getModel();
currentModel.applyEdits([{
range: {
startColumn: 0, startLineNumber: 1, endColumn: 3, endLineNumber: 9,
},
text: '// @拿我格子衫来'
}], true)
}
</script>
</body>
</html>