Сейчас я даю пользователю редактор кода для кодирования на моем веб-сайте и автоматически сохраняю этот файл каждый раз, когда файл изменяется пользователем.
Я использовал monaco
редактор кода и используя событие onDidChangeContent
, чтобы отследить любое изменение, происходящее в редакторе, например,
require(['vs/editor/editor.main'], function() {
monaco.editor.defineTheme('blue', {
base: 'vs',
inherit: true,
rules: [{ background: 'EDF9FA' }],
colors: {
'editor.foreground': '#000000',
'editor.background': '#EDF9FA',
'editorCursor.foreground': '#8B0000',
'editor.lineHighlightBackground': '#0000FF20',
'editorLineNumber.foreground': '#008800',
'editor.selectionBackground': '#88000030',
'editor.inactiveSelectionBackground': '#88000015'
}
});
editor = monaco.editor.create(document.getElementById("txtCodeAt"), {
value: 'Some default code',
lineNumbers: true,
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
wordWrap: 'on',
folding: true,
theme: "vs",
wordWrapMinified: false,
automaticLayout: true,
autoClosingBrackets: true,
minimap: { enabled: false },
fixedOverflowWidgets: true,
});
model = editor.getModel();
model.onDidChangeContent((event) => {
// here i catch all the changes and send to server using socket.
console.log(" event is ", event)
});
событие содержит объект range
, который определяет изменения, имевшие место в редакторе. Я хочу обновить файл на стороне сервера с этими изменениями.
Так есть ли способ, которым я могу использовать этот объект range
и применить его к моему файлу на стороне server
и соответственно обновить его?
Я использую flask
на моей стороне сервера. Прямо сейчас я отправляю полный файл и перезаписываю его новым контентом. Но я чувствую, что это можно сделать более эффективно.
Пожалуйста, предложите любой хороший вариант. Спасибо