MIGXdb - richtext field renders as textarea when used with Multiple Formtabs

chris.dempsey78 · January 20, 2024, 1:53pm

I used MIGXdb to create a Package and several CMPs to manage Events which works as intended.

Due to scope creep, my client wants to add a different type of Event which uses some but not all of the existing fields, and adds a new richtext content field.

Multiple Formtabs looks like the solution, as described by @halftrainedharry here.

Now when creating/updating an Event entry, the lightwindow shows the Multiple Formtabs dropdown and switches between the fields for Event Type A and Event Type B.

But the new richtext field for Event Type B renders as a textarea instead of a TinyMCE richtext field.

I found a workaround and a better fix that do render the richtext field and what appears to be a bug.

Can anyone suggest either how to fix the errors below or a better solution? Let me know if the schema file or MIGXdb configuration file would help.

There was a similar issue in 2013 but I don’t think its relevant.

Workaround

add a third MIGXdb configuration with the all the Event fields hidden except the richtext content field
add this configuration to the Multiple Formtabs field for the Events CMP - it must be first in the list

Better Fix

remove the third MIGXdb configuration
update the Multiple Formtabs order for the Events CMP so that the configuration that contains the richtext content field is first in the list

Suspected bug

With the Better Fix in place, when creating/updating an Event entry, the lightwindow shows the Multiple Formtabs dropdown and renders the richtext content field.

But if the user selects Event Type B from the Multiple Formtabs dropdown, then switches back to Event Type B the richtext content field is rendered as a textarea.

Error logs

On opening the Events CMP

[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/components/migx/model/migx/migx.class.php : 1278) PHP warning: Undefined array key "handler"
[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/components/migx/model/migx/migx.class.php : 1279) PHP warning: Undefined array key "handler"
[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/default/324341311beda1610e9500efa024d692325e254c_0.file.dragdrop.grid.tpl.php : 290) PHP warning: Undefined array key "autoResourceFolders"
[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/default/324341311beda1610e9500efa024d692325e254c_0.file.dragdrop.grid.tpl.php : 376) PHP warning: Undefined array key "jsonvarkey"
[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/default/324341311beda1610e9500efa024d692325e254c_0.file.dragdrop.grid.tpl.php : 432) PHP warning: Undefined array key "iframeWindowTitle"
[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/default/f28148c19f0463f4c99e5fd0ebb7e919060da731_0.file.gridpanel.tpl.php : 69) PHP warning: Undefined array key "customHandlers"
[2024-01-20 13:42:26] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/default/f28148c19f0463f4c99e5fd0ebb7e919060da731_0.file.gridpanel.tpl.php : 69) PHP warning: Attempt to read property "value" on null

On selecting Edit for an Event item in the grid opens the lightwindow

[2024-01-20 13:44:00] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"
[2024-01-20 13:44:00] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"
[2024-01-20 13:44:00] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"
[2024-01-20 13:44:00] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"

On selecting Event Type B from the Multiple Formtabs dropdown

[2024-01-20 13:45:32] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"
[2024-01-20 13:45:32] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"
[2024-01-20 13:45:32] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"
[2024-01-20 13:45:32] (ERROR @ /home/webapps/mysite/httpdocs/core/cache/mgr/smarty/bc4b672fab008cf91d4a713faa27e85894b3ebcb_0.file.listbox-single.tpl.php : 65) PHP warning: Undefined array key "typeAhead"

Environment

MODX Revolution 2.8.6-pl
MIGX 3.0.2-beta1
tinymcerte-2.0.9-pl

halftrainedharry · January 20, 2024, 8:00pm

What rich text editor are you using?

chris.dempsey78 · January 21, 2024, 11:53am

tinymcerte-2.0.9-pl from the default modx.com package repository.

halftrainedharry · January 21, 2024, 4:33pm

I could reproduce the issue.

The problem doesn’t seem to be MIGX. When a different formtab is selected, MIGX calls TinyMCERTE.loadForTVs() again to initialize the rich text fields.

Try fixing the problem the following way:

Download the file tinymcerte.js from here

github.com

modxcms/tinymce-rte/blob/8f39e402aca07f3800fa5e7f2d51771d81053859/src/modx/mgr/tinymcerte.js

Ext.ns('TinyMCERTE');
TinyMCERTE.Tiny = function (config, editorConfig) {
    Ext.apply(this.cfg, editorConfig, {});
    TinyMCERTE.Tiny.superclass.constructor.call(this, config);
};
Ext.extend(TinyMCERTE.Tiny, Ext.Component, {
    cfg: {
        selector: '#ta',
        document_base_url: MODx.config.base_url,
        file_picker_types: 'file image media'
    },
    allowDrop: false,
    initComponent: function () {
        TinyMCERTE.Tiny.superclass.initComponent.call(this);
        Ext.onReady(this.render, this);
    },
    editor: null,
    render: function () {
        var that = this;
        Ext.apply(this.cfg, TinyMCERTE.editorConfig, {});

This file has been truncated. show original

and replace assets/components/tinymcerte/js/mgr/tinymcerte.min.js with it. (Keep the name tinymcerte.min.js. This step is just because it is easier to change the code of a file that’s not minified.)

Before this line

github.com

modxcms/tinymce-rte/blob/8f39e402aca07f3800fa5e7f2d51771d81053859/src/modx/mgr/tinymcerte.js#L48


      
                              return false;
                          }
                      });
                      if (!found) return;
                      btn.el.dom.click();
                  });
                  if (that.allowDrop) {
                      that.registerDrop();
                  }
              };
              tinymce.init(this.cfg);
          },
          loadBrowser: function (callback, url, meta) {
              var browserUrl = MODx.config.manager_url + 'index.php?a=browser&source=' + MODx.config.default_media_source + (MODx.ctx ? ('&ctx=' + MODx.ctx) : '') + (MODx.request.id ? ('&id=' + MODx.request.id) : '');
              tinyMCE.activeEditor.windowManager.openUrl({
                  title: _('modx_browser'),
                  url: browserUrl,
                  width: 1200,
                  height: 600,
                  onMessage: function (api, data) {
                      if (data.mceAction === 'selectFile') {

add the line

tinymce.remove(this.cfg.selector);

According to this stackoverflow topic, .remove() has to be called before using .init() again.

chris.dempsey78 · January 22, 2024, 4:12pm

I’ll get a look at implementing this shortly.

As always, appreciate your investigative work.