mirror of
https://github.com/MathiasDPX/blog.git
synced 2025-05-10 15:43:09 +00:00
71 lines
No EOL
1.9 KiB
HTML
71 lines
No EOL
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Code Editor</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='editor.css') }}">
|
|
</head>
|
|
<body>
|
|
<textarea id="code" spellcheck="false" placeholder="<!DOCTYPE html>"></textarea>
|
|
<iframe id="preview" width="100%" height="100%"></iframe>
|
|
<div class="switch-container">
|
|
<label for="previewSwitch">Preview</label>
|
|
<input type="checkbox" id="previewSwitch">
|
|
</div>
|
|
<script>
|
|
const codeArea = document.getElementById('code')
|
|
const previewFrame = document.getElementById('preview')
|
|
const previewSwitch = document.getElementById('previewSwitch')
|
|
let lastCode = ''
|
|
let previewMode = false
|
|
|
|
function forceUpdatePreview() {
|
|
const currentCode = codeArea.value
|
|
const encodedCode = btoa(currentCode)
|
|
let url = `{{ hostname }}/preview/${encodedCode}`
|
|
if (previewMode) {
|
|
url += "?website=True"
|
|
}
|
|
previewFrame.src = url
|
|
}
|
|
|
|
function updatePreview() {
|
|
const currentCode = codeArea.value
|
|
if (currentCode !== lastCode) {
|
|
forceUpdatePreview();
|
|
lastCode = currentCode
|
|
}
|
|
}
|
|
|
|
function saveCode() {
|
|
const currentCode = codeArea.value
|
|
const blob = new Blob([currentCode], { type: 'text/plain' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = 'code.html'
|
|
a.style.display = 'none'
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
setInterval(updatePreview, 1000)
|
|
updatePreview()
|
|
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.ctrlKey && event.key === 's') {
|
|
event.preventDefault()
|
|
saveCode()
|
|
}
|
|
})
|
|
|
|
previewSwitch.addEventListener('change', function(event) {
|
|
previewMode = event.target.checked
|
|
forceUpdatePreview()
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |