public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example .myext Editor</title>
<style>
body {
font-family: Arial, sans-serif;
}
textarea {
width: 100%;
height: 300px;
}
button {
margin-top: 10px;
}
/* Popup styling */
.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.popup .close {
display: block;
text-align: right;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Edit example.myext File</h1>
<textarea id="fileContent"></textarea>
<button onclick="saveChanges()">Save Changes</button>
<button onclick="showPopup()">Show Function Result</button>
<div id="popup" class="popup">
<div class="close" onclick="closePopup()">✖</div>
<div id="popupContent"></div>
</div>
<script>
// Fetch the content of the .myext file and display it
fetch('/example.myext')
.then(response => response.text())
.then(data => {
document.getElementById('fileContent').value = data;
});
// Save changes made to the .myext file
function saveChanges() {
const content = document.getElementById('fileContent').value;
fetch('/example.myext', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: content })
})
.then(response => response.text())
.then(data => {
alert('File saved successfully');
})
.catch(err => {
alert('Error saving file');
});
}
// Show the popup with the function result
function showPopup() {
const result = myCustomFunction();
document.getElementById('popupContent').textContent = result;
document.getElementById('popup').style.display = 'block';
}
// Close the popup
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
// Define the custom function
function myCustomFunction() {
return 'Custom function executed!';
}
</script>
</body>
</html>
Top comments (0)