I want to add a button in Joomla 5 WYSIWYG Article Editor. The function is rather simple. I want to add a Pinterest Feed to the source of article not inside the normal text of the editor at cursor position like so…

Upon clicking the button, a prompt will be displayed for entry of board URL like above example.

I want to also add to the source the following JS from official Pinterest to display feeds. I also want to place a check that it is added only once so that it is not repeated again and again in the code if multiple boards are inserted.

To be honest, I’m new to Joomla CMS, So I tried accessing the samples online for this purpose. None worked for me. I tried ChatGPT to create one. It did not even added the button. After a little lookup online, I found a working example that adds a button and asks for a prompt but fails at code insert part. Below is the code I’m using.

plg_editor_test.xml

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="plugin" method="upgrade" group="editors-xtd">
        <name>Editor XTD Button Test</name>
        <author>Ghost</author>
        <creationDate>April 2024</creationDate>
        <copyright>Ghost. All rights reserved.</copyright>
        <license>CC0</license>
        <authorEmail>[email protected]</authorEmail>
        <authorUrl>none.com</authorUrl>
        <version>1.0.0</version>
        <description>
            "Adds a test button to the Editor"
        </description>
        <files>
            <filename plugin="test">test.php</filename>
        </files>
</extension>

test.php

<?php

 // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.plugin.plugin' );

class plgButtonTest extends JPlugin {

    function plgButtonTest(& $subject, $config)
    {
        parent::__construct($subject, $config);
    }
    function onDisplay($name)
    {

        $js = "
        function buttonTestClick(editor) {
                        txt = prompt('Please enter something', '123');
                        if (!txt) return;                       
                        jInsertEditorText('{test '+txt+'}', editor);
                        
            }";

        $css = ".button2-left .testButton {
                    font-weight: bold;
                }";
        $doc = JFactory::getDocument();
        $doc->addScriptDeclaration($js);
        $doc->addStyleDeclaration($css);
        $button = new JObject();
        $button->set('modal', false);
        $button->set('onclick', 'buttonTestClick(''.$name.'');return false;');
        $button->set('text', JText::_('Test'));
        $button->set('name', 'testButton');
        $button->set('link', '#');
        return $button;
    }
}
?>

When I click the button a prompt is displayed. Clicking OK does nothing and I get the following in console.

Uncaught ReferenceError: jInsertEditorText is not defined

The help pages of Joomla really go over my head as I can not find any beginner friendly documentation regarding this.