diff options
| author | ache <ache@ache.one> | 2018-04-13 12:03:50 +0200 |
|---|---|---|
| committer | ache <ache@ache.one> | 2018-04-13 12:03:50 +0200 |
| commit | 87f66c324c537b4dd550e87444d4903713d13211 (patch) | |
| tree | 0959be3c0141b1abc0002d74ec293fd0254a4226 /public | |
| parent | tohtml is now in a new file (diff) | |
Creation d'un package rollup Buddle Web Editor
Diffstat (limited to 'public')
| -rw-r--r-- | public/edit.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/public/edit.html b/public/edit.html new file mode 100644 index 0000000..b1aca3a --- /dev/null +++ b/public/edit.html @@ -0,0 +1,81 @@ +<!doctype html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <meta name="viewport" + content="width=device-width,minimum-scale=1,initial-scale=1"> + <title>hmarkdown example</title> + + <script src="js/script.js"></script> + <script src="js/qcm.js"></script> + <script src="js/hmd.min.js"></script> + <link rel="stylesheet" type="text/css" href="css/style.css"> + <link rel="stylesheet" type="text/css" href="css/rainbow.css"> + + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" crossorigin="anonymous"> +<style> +html { + height: 100vh; + width: 100vv; + overflow-y: hidden; +} +body { + display: grid; + grid-template-columns: 50% 50%; + grid-template-row: 100vv; + grid-template-areas: "edit preview"; + height: 100vh; + width: 100vv; + margin: 0; + padding: 0; + overflow-y: hidden; + overflow-x: hidden; +} +#edit { + grid-area: edit; + overflow-y: auto; + overflow-x: hidden; + height: 100vh; +} +#edit-zone{ + overflow-x: hidden; +} +#preview { + grid-area: preview; + overflow-y: scroll; + overflow-x: hidden; +} +</style> +</head> +<body> + <div id="edit"><div contenteditable="true" id="edit-zone">Yeah x2</div></div> + <div id="preview" contenteditable="false">Yeah ! </div> + + <!-- This is the bundle generated by rollup.js --> + <script> +let edit = document.getElementById('edit-zone'); +let preview = document.getElementById('preview'); +let modification = false; +let interval = setInterval( () => { + if( modification ) { + hmd(edit.innerText, (err, file) => { + preview.innerHTML = String(file); + modification = false; + }); + } +}, 500); + +edit.addEventListener('input', () => { + modification = true; + /* + edit.style.width = ''; + edit.style.height = ''; + if(edit.scrollWidth > edit.clientWidth) edit.style.width = edit.scrollWidth + 'px'; + if(exit.scrollHeight > edit.clientHeight) edit.style.height = edit.scrollHeight + 'px'; + */ +}, false); + + </script> +</body> +</html> + |