LORE Part 1. The basics

Lightweight Opensource Richcontent Editor

by Imabot

HTML

<h2>Editor</h2>
<div id="editor" contenteditable="true"><p>Edit here.</p></div>

<h2>HTML output</h2>
<pre id="output"></pre>

<small>More details on <a href="https://lucidar.me/en/rich-content-editor/lightweight-rich-content-editor-part-1-the-basics/" target="_blank">my blog</a>.</small>

CSS

#editor {
    min-height:30vh; 
    max-height:80vh; 
    overflow-y:auto;
    white-space: pre-wrap;
	background-color: #eaeaff;
}

#editor p { 
    margin: 0;
}

#output {
	background-color: #ffeaea;
}

JavaScript

let editor = document.getElementById('editor');
let output = document.getElementById('output');

// Set focus to the editor when page is loaded
document.addEventListener("DOMContentLoaded", () => {
	editor.focus();
});

// Update the output when the editor is updated
document.onselectionchange = () => {
	// Check if the editor is focussed
	if (editor === document.activeElement)
	{
		output.textContent = editor.innerHTML;
	}
}