For obvious reasons 2020 was a pretty quiet year for Porchfest, and this year I am playing catch up on the website stuff, blowing off all the dust and continuing the effort to get every porchfest site running on the same tech base.
An underbaked feature has been the ability for admins to edit various snippets on the site. Few admins are fluent in HTML, so my crude "edit the raw source code" was less than ideal.
I browsed around for various options. The one I landed on was Pell, a super-minimalist but still pretty well-featured editor. That page has the demo, the github page has some installation instructions, but it's kind of a mix of "run it from <script src> tags and code that looks like it's assuming there's going to be a build process.
Here's what I ended up with, my final Proof of Concept before integrating the tech into the Porchfest site:
<head>
<link rel="stylesheet" type="text/css"
href="https://unpkg.com/pell/dist/pell.min.css"> <style>
.pell-content {
background-color: #eee;
}
</style>
</head>
<body>
<div id="editor" class="pell"></div>
<form action="/form/" method="POST">
<input name="content" type="hidden" id="content" />
<button>Save Changes</button>
</form>
<script src="https://unpkg.com/pell"></script>
<script>
window.pell.init({
element: document.getElementById('editor'),
onChange: html => document.getElementById('content').value = html
});
const start = '<b><u><i>Initial content!</i></u></b>';
document.getElementById('editor').content.innerHTML = start;
document.getElementById('content').value = start;
</script>
</body>So, I just tuck the script stuff at the end, after the page is loaded, I seed the editor and a hidden input field with the content, and then the onChange keeps the hidden input field up to date, and then I can submit that to a form.
I have to find out how tolerant the editor is of crappy HTML that might have been in the system before, but this is really promising!
( https://github.com/jaredreich/pell also has a list of similar editors, comparing size and what not)
