commit: 6f92644ba8097aa4a1a117d78fcf9ab158776bb8
parent 75a3477e67ab60aae438fc6ec3643f88fdbe4ddd
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Sat, 2 Sep 2023 22:22:50 +0200
vanilla-editor: New demo
Diffstat:
4 files changed, 49 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
@@ -22,6 +22,7 @@ I am trash main()
<h2>List of Demos</h2>
<ul>
<li><a href="sorttable">dynamicaly sorttable table</a></li>
+ <li><a href="vanilla-editor">simple rich-text editor in VanillaJS</a></li>
</ul>
</main>
<footer>Copyright 2018 Haelwenn (lanodan) Monnier. Distributed under the <a href="http://creativecommons.org/licenses/by/4.0/">CC-BY 4.0 License</a>. Obviously, this demoset agrees that <a href="http://simpleweb.iscute.ovh/">simple web is cute</a>.</footer>
diff --git a/vanilla-editor/index.html b/vanilla-editor/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+ <meta charset="utf-8"/>
+ <title>Vanilla Editor — Web demos</title>
+ <link rel="stylesheet" href="../common.css"/>
+ <link rel="stylesheet" href="./vanilla-editor.css"/>
+</head>
+<body>
+ <header title="I hope there is not actually that much dead code online…">
+<pre><strong>BORN TO DIE()</strong>
+WORLD IS A `FSCK`
+鬼神 Kill Em All 1989
+I am trash main()
+410,757,864,530 DEAD CODES</pre>
+ </header>
+ <nav><a rel="up" href="..">Demos Homepage</a></nav>
+ <main>
+ <h1>Vanilla Editor</h1>
+ <h2>Source-code edition mode</h2>
+ <textarea id="content_source" placeholder="HTML code goes here" width="100%"></textarea>
+
+ <h2>Rich-text edition mode</h2>
+ <div contenteditable="true" id="content_view" autofocus="true"></div>
+
+ <p><a href="./vanilla-editor.js">JavaScript code used for this</a>, the trick is to use the HTML <code>contenteditable</code> attribute. I would recommend keeping <code>textarea</code> not only for advanced editions but also as a fallback.</p>
+ <script src="./vanilla-editor.js"></script>
+ </main>
+</style>
+</body>
diff --git a/vanilla-editor/vanilla-editor.css b/vanilla-editor/vanilla-editor.css
@@ -0,0 +1,4 @@
+textarea {
+ width: 100%;
+ height: min-content;
+}
diff --git a/vanilla-editor/vanilla-editor.js b/vanilla-editor/vanilla-editor.js
@@ -0,0 +1,14 @@
+let source = document.getElementById("content_source");
+let view = document.getElementById("content_view");
+
+source.addEventListener("input", (event) => {
+ view.innerHTML = source.value;
+});
+
+view.addEventListener("input", (event) => {
+ source.value = view.innerHTML;
+});
+
+let hello = 'This is an example of <i>VanillaJS rich-text edition</i>. Your browser probably provides you with Word Processor shortcuts (ctrl-i for Italic, ctrl-b for Bold) in the rich-text editing mode.';
+view.innerHTML = hello;
+source.value = hello;
