Chunk and Snippets: bigger modx editor window and coloured editor

Support
1

Hi Modxers

Our modx 2.8.4 is going well on php8.1 - but we need Chunk and Snippet editing to have a bigger modx editor window and coloured editor mark-up. Have any of you a solution for that? Maybe i accidentally disabled that coloured editor, but now we just have a raw text editor for snippets and chunks, which we can use, but a bigger editor window and coloured editor window mark-up would be very useful. Any ideas would be much appreciated.

2

Do you have the Ace extra installed?

3

Thanks for the reply @halftrainedharry . No, never used Ace. do you use it? I installed it now and that is super - much appreciated. and it has a “full-screen” button in there too so that helps with the small code window on modx. do you use any other trick/plugin to fix that small code window for snippets and chunks?

4

If you are developing locally, you could use static elements. Then the content of the snippet/chunks is in files and you can use any IDE to edit them.

For editing directly in the manager, Ace is the best solution I know of.

Ace has a system setting ace.height. So you could change that to make the code window bigger.

5

I wrote a bookmarklet for expanding the height of the Ace window without going full screen. I find it helpful on large displays.

javascript:(function(){document.querySelector('.ace_editor').style.height = '70vh';window.dispatchEvent(new Event('resize'));})();
2 Likes
6

thanks @halftrainedharry - where could i put that setting? i googled to see if anyone else used it and i see nothing; and i searched the ACE plugin and i see no mention of it there either

7

thanks @dev_willis - where could i add that javascript so that it works on the ace editor window?

8

It’s under System Settings (the cog wheel icon in the top right menu bar). Then select ace from the dropdown (where it says core) to see all of Ace’s settings.

Also if you are into dark themed editors, my recommendation is idle_fingers in the setting ace.theme.

9

thanks @vibedesign . that worked great. much appreciated

10

Create a bookmark and paste the JS into the URL field. I didn’t know about the ace.height system setting tho. If you always want it to be bigger, the system setting is probably the better option.