[SOLVED] Cannot insert text into Editor in Joomla 5 Editors XTD Button Plugin

Cannot insert text into Editor in Joomla 5 Editors XTD Button Plugin

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>none@none.com</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.

Solution

I think is better a custom field solution: Create a custom field where you will place the URL you need use for the feed. Then, in a override to the articles view, you load the script you need if this custom field is present for the article. Is easy enough.

Documentation you can follow for this:

Managing Custom Fields
Web Assets For you learn how handle proper the JS asset
Template Overrides The component view you need override is com_content/article

Note: The code example you uploaded is deprecated for current version of the CMS. So you cant continue with that. If you want go further with this implementation you need look at editors-xtd plugins implementations like Image editor-xtd button