Rich Text Editors and LiveView?

Well … if you are not interested in HTML editors then you could consider markdown ones. Even creating such should not be a problem. That’s just a couple of buttons that insert some text in the current selection.

The only problem with that is how LiveView treats textarea i.e. it’s always a source of truth and therefore assign does not affects it and you have to write some extra JavaScript code to workaround it which is a bit confusing:

I guess that every JavaScript editor is simple to add into LiveView as long as you understand how it works … In normal case you could simply put some JavaScript at the bottom of the body tag contents making it executable after other elements are rendered. Alternatively there are onload and other events you are interested in and you should find the information about all of it in the specific editor documentation.

The only difference here is that window load events != LiveView load. So what you should focus on are not editor-specific blog posts, but LiveView documentation like:

https://hexdocs.pm/phoenix_live_view/js-interop.html

The only “easier” way are hex packages (if any) which does that for you, so you only have to import their JavaScript hooks and add them to your LiveView hooks.

1 Like