Using ACE editor on custom windows

camicase82 · June 21, 2021, 2:41pm

Hi there, in a project we are working on, the user needs to input code in some custom windows, not the normal html/content that is part of the standard ModX windows but other textAreas, how can we use the ACE editor there? I’ve checked the tags styles and other elements but haven’t found how to force the editor to attach to my areas

halftrainedharry · June 21, 2021, 4:04pm

If you are using Ext.js to create these custom windows, then I believe you can use the xtype ‘modx-texteditor’ like for example here:

github.com

modxcms/fred/blob/ea819f7188e98d16cc64dd84b99299b5b9c45256/assets/components/fred/mgr/js/element/panel.js#L447-L463

    
      
          {
              xtype: Ext.ComponentMgr.isRegistered('modx-texteditor') ? 'modx-texteditor' : 'textarea',
              mimeType: 'text/html',
              name: 'content',
              id: 'fred-element-content',
              hideLabel: true,
              anchor: '100%',
              height: 400,
              grow: false,
              value: '',
              listeners: {
                  render: function () {
                      if ((this.xtype === 'modx-texteditor') && this.editor)
                          this.editor.getSession().setMode('ace/mode/twig')
                  }
              }
          }

camicase82 · June 21, 2021, 4:09pm

actually we are building the front using VueJs, but this gives me a clue to start looking at the rigth place to set up this, thanks a lot!

camicase82 · June 24, 2021, 11:52pm

Just in case anyone is ever facing this, the solution was just to use a wrapper and add the base Ace libraries to our editors, here is a clear example on how to get it up and running