monaco editor 적용

This commit is contained in:
현성필
2023-05-16 20:30:25 +09:00
parent 8ceaa6ef53
commit 58c11861ff
2 changed files with 26 additions and 12 deletions
@@ -6,7 +6,6 @@
<section layout:fragment="contentFragment">
<script>
require.config({paths: {'vs': '/plugins/vs'}});
// require(['vs/editor/editor.main'], function(){});
</script>
<div id="loading-overlay" style="display: none;">
<div class="d-flex justify-content-center align-items-center"
@@ -475,7 +474,6 @@
let me = this;
require(['vs/editor/editor.main'], function () {
let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], {
value: model.requestBody,
@@ -507,6 +505,7 @@
});
me.responses.push(responseBodyEditor);
});
target.find('.path').val(model.path);
target.find('.method').val(model.method);
this.renderParam(idx);
@@ -4,6 +4,9 @@
<body>
<section layout:fragment="contentFragment">
<script>
require.config({paths: {'vs': '/plugins/vs'}});
</script>
<div class="container mt-1">
<form name="mockRouteForm" id="mockRouteForm"
th:action="${mockRoute.id == null}?@{/mgmt/routes/register.do}:@{/mgmt/routes/update.do}"
@@ -130,11 +133,9 @@
<input class="form-control" type="number" name="delay" required/>
<label class="form-label must">응답 지연 시간(ms)</label>
</div>
<div class="form-floating mt-1">
<textarea class="form-control" style="height: 200px;" name="body">
</textarea>
<label class="form-label must">응답 Body</label>
</div>
<label class="form-label mt-1">응답 Body</label>
<div class="response_body" style="width:100%;height:250px;border:1px solid grey;"></div>
<textarea class="form-control" style="display: none;" name="body"></textarea>
</div>
<div class="card-body">
<table class="table">
@@ -217,6 +218,7 @@
let view = {
currentIdx: 0,
responseEditors : [],
init: function () {
$('.btn_add_case').on('click', function () {
controller.addResponse();
@@ -255,6 +257,7 @@
conditions: [],
headers: []
};
//statusCode, delay, defaultResponse, body 로 끝나는 항목을 찾음
response.statusCode = $(this).find('input[name$="statusCode"]').val();
response.delay = $(this).find('input[name$="delay"]').val();
response.defaultResponse = $(this).find('input[name$="defaultResponse"]').val()==='true';
@@ -278,7 +281,7 @@
};
response.headers.push(header);
});
console.log(model);
});
$('#responses').empty();
this.render();
@@ -327,6 +330,22 @@
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').val(model.responses[i].statusCode);
nodeCopy.find('input[name="responses[' + i + '].defaultResponse"]').val(model.responses[i].defaultResponse);
nodeCopy.find('input[name="responses[' + i + '].delay"]').val(model.responses[i].delay);
let me = this;
require(['vs/editor/editor.main'], function () {
let editor = monaco.editor.create(nodeCopy.find(".response_body")[0], {
value: model.responses[i].body,
theme: 'vs-light',
automaticLayout: true
});
me.responseEditors.push(editor);
me.responseEditors[i].onDidChangeModelContent(function (e) {
model.responses[i].body = me.responseEditors[i].getValue();
nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
});
});
nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () {
@@ -337,10 +356,6 @@
model.responses[i].delay = $(this).val();
});
nodeCopy.find('textarea[name="responses[' + i + '].body"]').on('input', function () {
model.responses[i].body = $(this).val();
});
let conditions = nodeCopy.find('.response_conditions');
for (let c = 0; c < model.responses[i].conditions.length; c++) {