djb-eapim/elink-test-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

monaco editor 적용

Browse Source
This commit is contained in:
현성필
2023-05-09 23:11:46 +09:00
parent ca2df962ee
commit 8bed4fc05d
72 changed files with 39 additions and 75144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/fragment/head.html
+1 -6
View File
@@ -15,8 +15,6 @@
<link rel="stylesheet" href="/css/fontawesome/css/all.min.css" type="text/css"/>
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/custom.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="/css/codemirror/codemirror.css" type="text/css"/>
<link rel="stylesheet" href="/css/codemirror/theme/monokai.css" type="text/css"/>
<link rel="stylesheet" href="/js/summernote/summernote-lite.min.css" type="text/css" />
<link rel="stylesheet" href="/css/dataTables/datatables.min.css" />
@@ -38,12 +36,9 @@
<script src="/js/jquery-validation/additional-methods.min.js"></script>
<script src="/js/jquery-validation/localization/messages_ko.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/codemirror/codemirror.js"></script>
<script src="/js/codemirror/mode/javascript/javascript.js"></script>
<script src="/js/codemirror/addon/display/fullscreen.js"></script>
<script src="/js/codemirror/addon/display/placeholder.js"></script>
<script src="/js/summernote/summernote-lite.min.js"></script>
<script src="/js/dataTables/datatables.min.js"></script>
<script src="/plugins/vs/loader.js"></script>
<script type="text/javascript">
</script>
src/main/resources/templates/page/apiTester.html
+38 -41
View File
@@ -4,6 +4,10 @@
<body>
<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"
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
@@ -117,7 +121,7 @@
<option value="xml">xml</option>
<option value="text/plain">raw</option>
</select>
<textarea class="form-control request_body mt-1" style="height: 200px;"></textarea>
<div class="request_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
</div>
</div>
<div class="mt-1">
@@ -144,7 +148,7 @@
<div class="tab-content border-bottom" style="min-height: 250px;">
<div class="tab-pane fade show active" id="responseBodyTab" role="tabpanel"
aria-labelledby="requestParams-tab">
<textarea style="height: 200px;" class="response_body"></textarea>
<div class="response_body mt-1" style="width:100%;height:250px;border:1px solid grey;"></div>
</div>
<div class="tab-pane fade" id="responseHeaderTab" role="tabpanel"
aria-labelledby="requestParams-tab">
@@ -384,47 +388,39 @@
target.find('.send').click(function () {
controller.send(idx);
});
var me = this;
let requestBody = CodeMirror.fromTextArea(target.find(".request_body")[0], {
lineNumbers: true,
mode: "application/json",
extraKeys: {
"Ctrl-Enter": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
require(['vs/editor/editor.main'], function() {
let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], {
value: '',
language: 'json',
theme: 'vs-light',
automaticLayout: true
});
me.requests.push(requestBodyEditor);
target.find(".request_body")[0].addEventListener('shown.bs.tab', function () {
me.requests[idx].layout();
});
me.requests[idx].onDidChangeModelContent(function (e) {
model.requestBody = me.requests[idx].getValue();
});
target.find('.request_body_type').on('change', function () {
let model = me.requests[idx].getModel();
monaco.editor.setModelLanguage(model, $(this).val());
});
let responseBodyEditor = monaco.editor.create(target.find(".response_body")[0], {
value: '',
language: 'json',
theme: 'vs-light',
automaticLayout: true
});
me.responses.push(responseBodyEditor);
});
requestBody.setValue(model.requestBody);
this.requests.push(requestBody);
let me = this;
target.find('.request_body_type').on('change', function () {
console.log($(this).val());
me.requests[idx].setOption('mode', $(this).val());
});
requestBody.on('change', function (cm, change) {
model.requestBody = cm.getValue();
})
let responseBody = CodeMirror.fromTextArea(target.find(".response_body")[0], {
lineNumbers: true,
mode: "application/json",
readOnly: true,
noCursor: true,
extraKeys: {
"Ctrl-Enter": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
this.responses.push(responseBody);
target.find('.path').val(model.path);
target.find('.method').val(model.method);
this.renderParam(idx);
@@ -532,6 +528,7 @@
target.find('.response_headers').empty();
view.responses[tabIdx].setValue('');
let startTime = new Date().getTime();
if (model.path !== '') {
controller.showLoadingOverlay();
this.currentAjaxRequest = $.ajax({