For this post, I used froala-editor 2.8.4 and codemirror 5.40.0.
I started using Froela Editor recently and the experience is being really good, but having to add the syntax highlight for the HTML Editor was a headache. Fortunatelly I found a solution to make everything work properly using Webpacker with Ruby on Rails.
In order to enable the syntax highlight, you will need to add
First install it:
Finally, wherever you call
$('.element').froalaEditor, add the codeMirror option like here:
You need to add the
codeMirror option because by default, Froala Editor tryies to use
window.CodeMirror, but as we just imported it, CodeMirror is not available on
Instead of setting codeMirror option, you could set
window.CodeMirror = CodeMirror,
but it is not a clean solution.
In the end, the code should look like this: