Syntax highlight in HTML Block (admin area) event on editor open

Good day to everyone
I need some help with admin panel
The goal is to add syntax highlighter for HTML block (\luya\cms\frontend\blocks\HtmlBlock) in admin area


I was thinking about to use CodeMirror (or any other plugin), but it needs to bi initialized on a specific textarea (by id or element)

There could be much more than one html block on one page… so i think i need some event (like “html block editor is opened”) to init the highlighter script on this event on given textarea…
But i don`t know angular at all., so this is a problem…

Could some one advice how to do this, or may be which way to search/read…?

As alternative i think i could try to use some script or jquery plugin to init syntax highlighter on every textarea in cms page edit… but i think it is not good idea

Hi @webmicro, welcome to LUYA forum.

So you would like to have “code editor” as a block. If there is a good code editor Angular Plugin we could create an extension which can be installed. You where talking about, https://github.com/angular-ui/ui-codemirror i assume? I don’t think you need an event, you just need to write this code in angularjs (or use an extension which have already wrapped the suggested library as angularjs directive).

Basically when you would like to create a block and allow others to install them via composer you should follow this guide: https://luya.io/guide/luya-package-dev

Here is an example of someone who implemented a WYSIWYG editor as a block: https://github.com/liberosoft/luyawysiwyg

So if you know the angularjs library you’d like to use then i could write a small tutorial which shows you how to achieve this.