Это приложение показывает, как мы можем ограничить редактирование определенных мест в редакторе Монако. Чтобы увидеть репозиторий кликните сюда
Оглавление
- Фактический код
- Почему этот фрагмент нужен?
- Как это достигнуто?
- Итак, что это делает?
- Плюс
- Господин
- Случаи применения
- См. Часть 2
- Может решить это
Фактический код
require.config({ paths: { vs: "./monaco-editor/min/vs" } }) require(["vs/editor/editor.main"], initEditor) const startPhrase = `// Start of editable area` const endPhrase = `// End of editable area` const editableArea = ((startPhrase,endPhrase) => { return { includes : function(changes,model){ const fullRange = model.getFullModelRange(); let { range : startRange } = model.findMatches(startPhrase,fullRange).shift() || {}; let { range : endRange } = model.findMatches(endPhrase,fullRange).pop() || {}; const { startLineNumber, endLineNumber, startColumn, endColumn } = fullRange; const isEmpty = text => text === ''; // ? refers to backspace and delete const isEnter = text => /\n/.test(text); if(startRange && endRange){ startRange = startRange.setStartPosition(startLineNumber,startColumn); endRange = endRange.setEndPosition(endLineNumber,endColumn); return changes .every(({ text,range }) => { const specialCases = () => { /* ? This is done for my use case ? This allows enter at the end of the start Range and ? This allows the enter and backspace on the start of the end Range ? This is an optional case */ return ( ( isEnter(text) || range.startLineNumber > startRange.endLineNumber) && ( isEnter(text) || isEmpty(text) || range.endLineNumber < endRange.startLineNumber) ); } return !startRange.strictContainsRange(range) && !endRange.strictContainsRange(range) && specialCases(); }) } return false; } } })(startPhrase,endPhrase); function initEditor(){ const sampleJs = ` /** * This place cannot be edited */ // Start of editable area function editable(){ console.log('This part can be edited and all stuff can be done here') } // End of editable area /** * This place cannot be edited */` const jsModel = monaco.editor.createModel(sampleJs,"javascript"); const editorDiv = document.querySelector('.editorDiv'); const jsContainer = monaco.editor.create(editorDiv); jsContainer.setModel(jsModel); jsModel.onDidChangeContentFast(({ changes,isUndoing }) => { if(!isUndoing){ if(!editableArea.includes(changes,jsModel)){ /* * This Promise.resolve() sends the code to the micro task queue * And it gets called before the event queue ( micro task queue has more priority than event queue) * Thus, Promise.resolve() will be better than a setTimeout(fn,0) here * If we do it synchronously, it affects some of monaco editor's functions */ Promise.resolve().then(() => jsContainer.trigger('someIdString','undo')) } } }) }
Почему этот фрагмент нужен?
Редактор Monaco является одним из лучших онлайн-редакторов JavaScript, но недавно seteditableerange
Функциональность была удалена из нее. Обратитесь Это Отказ
Эта фрагменты пытается установить ограничение в редактируемой области
Как это достигнуто?
- Этот фрагмент нуждается в начальных и концевых фразах, к которым необходимо реализовать редактируемое ограничение
-
ondidchangeContentfastfast
Крючки наблюдаются за изменениями, и если это изменение не происходит в разрешенной областиотменить
будет срабатывать, что отключает содержимое, которое набрано/вставленный - Обещание. Resolve () – используется для перемещения
уничтожение
Функция на очередь MicroTask, этим редактором Monaco разрешено делать его вещи, и как только это завершено, этоуничтожение
функция срабатывает - Площадь выше начальной фразы и конечной фразы будет ограничена
Примечание : Очередь MicroTask имеет более приоритетное внимание, чем очередь событий, тем самым обещают. Продвигается становится лучшим вариантом, чем SettimeOut (FN, 0) в этом сценарии.
Итак, что это делает?
Этим мы можем создать Иллюзия
Вроде, ничто не разрешено ввести в зону запрещенной зоны, но то, что на самом деле происходит, это все напечатанные значения, получают отмену, как только он набирается в зоне ограниченной
Плюс
- Преимущество использования этого фрагмента –
Там не будет никакого задержки пользовательского интерфейса во время отмены
Ранее, ранее при использовании Settimeout, расстегнутая операция будет видна пользователю - Предложения AutoColletions из ограниченной зоны будут доступны
Господин
- Это требует запуска и окончательной фразы
- Я не проверил этот код с большим количеством склеивания текстов, поэтому он может сломаться на этом этапе. Это будет работать нормально для печати
Случаи применения
- Если вы пытаетесь разработать онлайн-платформу кодирования интервью, используя редактор Monaco, и вы хотите позволить кандидатам редактировать только определенные места, Это может быть использовано
См. Часть 2
Ограничить редактируемую зону в редакторе Монако – часть 2
Pranom Vignesh · 20 августа20 · 2 мин читать
Может решить это
Это может стать решением этого Выпуск GitHub
Оригинал: “https://dev.to/pranomvignesh/restrict-editable-area-in-monaco-editor-4hac”