-
|
Hi there, <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>aeon</title>
</head>
<script src="js/htmx.min.js"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
<body>
<div id="logheader" class="log-header">
<div>
<button hx-get="/v1/config"
hx-trigger="click"
hx-target="#cfgEdit"
>
cfg
</button>
</div>
</div>
<div id="mainArea" style="display:inline-flex;">
<div id="cfgEdit">
<div name="editor" id="editor"> --- </div>
</div>
</div>
<script src="js/ace.js" type="text/javascript" charset="utf-8">
var editor = ace.edit("editor");
editor.session.setMode("js/yaml");
</script>
</body>
</html>and the template <div name="editor" id="editor"> --- </div>
<form action="/cfgsave" method="POST">
<input type="submit" value="Test">
</form>Now including a <script>
editor.setvalue({{cfgtext}});
</script>in the template won't work as html rightly complains. Using hyperscript also seems not working but it's possible that I made some mistake on where and when to use it in the example. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @mcesaro I did something similar recently though with Quill.js I believe this codepen does what you intend to. Basically, use Hope this helps |
Beta Was this translation helpful? Give feedback.
-
|
@matiboy thank you so much. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>aeon</title>
</head>
<script src="js/htmx.min.js"></script>
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
htmx.logAll();
var aceEditor = null;
document.addEventListener("DOMContentLoaded", function() {
aceEditor = ace.edit(document.getElementById("editor"), {mode: "js/yaml"})
});
</script>
<body>
<div id="logheader" class="log-header">
<div>
<button hx-get="/v1/config"
hx-on::after-request="aceEditor.setValue(event.detail.xhr.responseText)"
hx-trigger="click"
hx-swap="none"
name="config"
>
cfg
</button>
</div>
</div>
<div id="mainArea" style="display:inline-flex;">
<div id="cfgEdit">
<div id="editor"></div>
</div>
</div>
</body>
</html>In my case what did the trick was to use |
Beta Was this translation helpful? Give feedback.
Hi @mcesaro I did something similar recently though with Quill.js
I believe this codepen does what you intend to. Basically, use
after-requestto put the content into your editor. You can do something similar for your "POST" to grab the content from the edit onbefore-requestHope this helps