demo

vanilla-editor.js (1023B)

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;
});
// Abusing JS Templates for multiline
let hello = `<p>This is an example of VanillaJS rich-text edition. Your browser probably provides you with Word Processor shortcuts (ctrl-i for Italic, ctrl-b for Bold) in the rich-text editing mode.<br/>
Meh parts are when it comes to things beyond just basic text-formatting like links, lists, tables, … which can still be pasted in formatted-mode in the rich-text area.</p>
<ol>
<li>First item</li>
<li>Second item</li></ol>
<p>Tables are where it’s usually not great at and where you’d definitely need some helper code for the user to add rows/columns:</p>
<table>
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>`;
view.innerHTML = hello;
source.value = hello;