[#38127] - TypeError: undefined is not an object (evaluating 'a.joomlaExtButtons.names')
- Closed
- 25 Jun 2022
- Medium
- Build: 4.2-dev
- # 38127
After updating Joomla! to the latest 4.1.5 version, all the TinyMCE editors with custom scripts (attached at runtime) are not properly initialized due to the JS error mentioned in the title.
Since it is not possible to customize the quickbars_selection_toolbar from the configuration of the TinyMCE editor plugin, I injected my preferred buttons via JDocument.
This issue seems to be due to the adjustments applied by this PR:
#37964
Steps to reproduce the issue
Apply the following code to customize the quickbars toolbar of TinyMCE:
// overwrite the QUICKBAR button declared by Joomla, since it is statically
// filled via code as: bold italic underline | h2 h3 | link blockquote
JFactory::getDocument()->addScriptOptions('plg_editor_tinymce', [
'tinyMCE' => [
'my_field_name' => [
'quickbars_selection_toolbar' => 'bold italic | blockquote link',
],
],
]);Expected result
Before the update to Joomla! 4.1.5, the editor worked as expected.
Actual result
After the update to Joomla! 4.1.5, the editor is not initialized because of a JS error, which states that joomlaExtButtons is undefined.
System information (as much as possible)
I think there's nothing relevant that could help.
Additional comments
In detail, the issue seems to be caused by the refactoring of this code:
// Prepare the instance specific options, actually the ext-buttons
if (empty($options['tinyMCE'][$fieldName]['joomlaExtButtons']))
{
$btns = $this->tinyButtons($id, $buttons);
// Set editor to readonly mode
if (!empty($params['readonly']))
{
$options['tinyMCE'][$fieldName]['readonly'] = 1;
}
$options['tinyMCE'][$fieldName]['joomlaMergeDefaults'] = true;
$options['tinyMCE'][$fieldName]['joomlaExtButtons'] = $btns;
$doc->addScriptOptions('plg_editor_tinymce', $options, false);
}Which has been changed into this one:
// Prepare the instance specific options
if (empty($options['tinyMCE'][$fieldName]))
{
// Width and height
if ($width)
{
$options['tinyMCE'][$fieldName]['width'] = $width;
}
if ($height)
{
$options['tinyMCE'][$fieldName]['height'] = $height;
}
// Set editor to readonly mode
if (!empty($params['readonly']))
{
$options['tinyMCE'][$fieldName]['readonly'] = 1;
}
// The ext-buttons
if (empty($options['tinyMCE'][$fieldName]['joomlaExtButtons']))
{
$btns = $this->tinyButtons($id, $buttons);
$options['tinyMCE'][$fieldName]['joomlaMergeDefaults'] = true;
$options['tinyMCE'][$fieldName]['joomlaExtButtons'] = $btns;
}
$doc->addScriptOptions('plg_editor_tinymce', $options, false);
}In my case, since I manually injected some options into $options['tinyMCE'][$fieldName], the first condition does not verify and prevents the editor from filling the joomlaExtButtons attribute. In addition, the second condition (nested into the first one) does not seem to make sense. Since the parent $options['tinyMCE'][$fieldName] node is empty, the attribute $options['tinyMCE'][$fieldName]['joomlaExtButtons'] cannot exist. This means that the second condition is always verified.
I believe that the second condition should rather be moved outside the parent IF statement, in order to always initialize the Joomla! buttons. Something like:
// Prepare the instance specific options
if (empty($options['tinyMCE'][$fieldName]))
{
// Width and height
if ($width)
{
$options['tinyMCE'][$fieldName]['width'] = $width;
}
if ($height)
{
$options['tinyMCE'][$fieldName]['height'] = $height;
}
// Set editor to readonly mode
if (!empty($params['readonly']))
{
$options['tinyMCE'][$fieldName]['readonly'] = 1;
}
}
// The ext-buttons
if (empty($options['tinyMCE'][$fieldName]['joomlaExtButtons']))
{
$btns = $this->tinyButtons($id, $buttons);
$options['tinyMCE'][$fieldName]['joomlaMergeDefaults'] = true;
$options['tinyMCE'][$fieldName]['joomlaExtButtons'] = $btns;
}
$doc->addScriptOptions('plg_editor_tinymce', $options, false);
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
When you add your code?
Try to use onBeforeCompileHead then it should work,
I will look for main issue that cause it.
@Fedik thanks for looking into this issue.
I'm using this code in a view. In a few words I have a model that dynamically generates a form and, every time I find an editor to display, I inject my custom script to alter the default quickbars of TinyMCE. In a few words, my code runs between the onAfterRoute and onAfterDispatch system events.
I confirm that moving the script injection within the head compiling stage solves the issue. However, since I cannot use a plugin, I'm forced to register an event at runtime, making my previous code looks like this one:
// overwrite the QUICKBAR button declared by Joomla, since it is statically
// filled via code as: bold italic underline | h2 h3 | blockquote link
$app->registerEvent('onBeforeCompileHead', function() use ($app, $field, $quickbars)
{
$app->getDocument()->addScriptOptions('plg_editor_tinymce', [
'tinyMCE' => [
$field->name => [
'quickbars_selection_toolbar' => $quickbars,
],
],
]);
});For the moment I will stay with this code, even if I would rather have the ability to inject my scripts without having to rely on a specific event.
Any advancement on this issue would be really appreciated.
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-06-25 07:54:09 |
| Closed_By | ⇒ | Fedik |
I tested your PR and I confirm that it definitively fixes the issue.
@matteo-galletti Could you go to the PR in the issue tracker and mark your test result? To do this, just go to https://issues.joomla.org/tracker/joomla-cms/38138 , then use the blue "Test this" button at the top left corner, then select the right test result (in your case success) and finally submit. This will make your test being counted. Thanks in advance.
Of course @richard67. I've just marked the item as successfully tested.
@Fedik Could you have a look on this? Thanks in advance.