Text editor with customized toolbar buttons & preview

As part of my app I needed to allow users to edit content that used BBCode. I’d started out using just a text area, but wanted something with toolbar buttons. I went down the rabbit hole of trying Quill and other editors that show you an in-editor preview, before realizing I just needed a text editor with a separate preview.

What came out of that effort is this: BBCode Editor And Previewer

The preview is handled with client-side parsing of the BBCode into HTML/CSS, so there’s no server side lag for previewing. The editor form shows how to hook new toolbar buttons into the editor, and the bbcode module shows how to hook new BBCode tags into the Javascript parser.

It’s all undocumented, but shared in the hopes that it might help someone who also needs something between a text area and a full WYSIWYG editor.

As a bonus, it works fine in an Anvil alert.

Here’s a clone link:
https://anvil.works/build#clone:4JRFS6ENN3IECEYR=ZYY7HQACJW3MFJ4HOB6C6U2P

4 Likes

The app linked shows an error :

NameError: name 'anvil' is not defined
1 Like

Should be working now. I ripped out a bunch of app specific code, must have ripped out one import too many.

2 Likes