TinyMCE in Joomla 4: <custom-element> without automatically added <p>

Question

Can someone please tell me how it becomes possible in TinyMCE that a custom HTML element e.g.

<my-custom-element>text...</my-custom-element>

when saving the article is NOT always forcibly converted to

<p><my-custom-element>text...</my-custom-element></p>,

but remains without the added <p>... </p>

like it is when I use e.g. <blockquote>?

Otherwise <p> should remain the default for new paragraphs if possible.

Thank you.

[I'm told to post my issue here, original post is this: https://stackoverflow.com/questions/71084382/tinymce-in-joomla-4-custom-element-without-automatically-added-p]

Answer 1

The settings for TinyMCE are managed in the Plugin Editor- TinyMCE. You may be able to find an option there like 'New Line', or try reading their help documentation to find how to achieve what you want.

You may also find that if you save the article/item while in the Code view and not the WYSIWYG view then it will not try to insert the <p>. This works in JCE, so maybe it will work in Tiny.

Answer 2

https://www.tiny.cloud/docs/configure/content-filtering/#custom_elements

TinyMCE supports defining custom elements but this is not implemented in Joomla. Though this can be added using plugins or layout overrides.

There is no TinyMCE-specific event for something like this and the editor overwrites existing script options. So your best bet would be onAfterDispatch or later event.

defined('_JEXEC') || exit;

use Joomla\CMS\Plugin\CMSPlugin;

class PlgEditorsXtdTinyMceCustomElements extends CMSPlugin
{
    protected $app;

    public function onAfterDispatch()
    {
        if ($options = $this->app->getDocument()->getScriptOptions('plg_editor_tinymce'))
        {
            $options['tinyMCE']['default']['custom_elements'] = 'my-custom-element,another-custom-element,~inline-custom-element';
            $this->app->getDocument()->addScriptOptions('plg_editor_tinymce', $options);
        }
    }
}

Note that custom elements might not work the way you expect. That seems to be an issue with TinyMCE. You can test it here https://fiddle.tiny.cloud/YVhaab.