Joomla 5 Editors XTD按钮插件问题：无法插入Pinterest Feed代码

一、核心错误解决 #

Joomla 5 已弃用旧的全局函数jInsertEditorText，需改用Joomla.editors API操作编辑器。你需要先获取当前激活的编辑器实例，再调用对应的插入方法。

二、完整插件实现步骤 #

1. 插件基础结构 #

创建plg_editorsxtd_pinterestfeed文件夹，包含以下文件：

• pinterestfeed.php（主插件逻辑文件）
• pinterestfeed.xml（插件配置文件）
• assets/js/pinterestfeed.js（前端交互脚本）

2. 插件配置文件（pinterestfeed.xml） #

<?xml version="1.0" encoding="UTF-8"?>
<extension type="plugin" group="editors-xtd" method="upgrade">
    <name>plg_editorsxtd_pinterestfeed</name>
    <author>自定义作者名</author>
    <creationDate>2024</creationDate>
    <copyright>GNU GPL v2+</copyright>
    <license>GNU General Public License version 2 or later</license>
    <version>1.0.0</version>
    <description>在编辑器中插入Pinterest画板Feed</description>
    <namespace>Joomla\Plugin\EditorsXtd\PinterestFeed</namespace>
    <files>
        <filename plugin="pinterestfeed">pinterestfeed.php</filename>
        <folder>assets</folder>
    </files>
</extension>

3. 主插件PHP文件（pinterestfeed.php） #

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Plugin\CMSPlugin;
use Joomla\CMS\Uri\Uri;

class PlgEditorsXtdPinterestFeed extends CMSPlugin
{
    public function onDisplay($name)
    {
        $doc = Factory::getApplication()->getDocument();
        // 注册并加载前端脚本
        $doc->getWebAssetManager()->registerScript(
            'plg_editorsxtd_pinterestfeed',
            Uri::root(true) . '/plugins/editorsxtd/pinterestfeed/assets/js/pinterestfeed.js',
            [],
            ['defer' => true]
        );
        
        // 构建编辑器按钮
        $button = new stdClass();
        $button->class = 'btn btn-secondary';
        $button->text = '插入Pinterest画板';
        $button->onclick = "PinterestFeed.openModal('$name'); return false;";
        $button->name = 'icon-pinterest'; // 使用Joomla内置图标
        
        return $button;
    }
}

4. 前端交互脚本（assets/js/pinterestfeed.js） #

var PinterestFeed = {
    editorName: '',
    
    openModal: function(editor) {
        this.editorName = editor;
        // 动态创建模态弹窗
        const modal = document.createElement('div');
        modal.innerHTML = `
            <div class="modal fade" id="pinterestFeedModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">输入Pinterest画板URL</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <input type="text" id="pinterestBoardUrl" class="form-control" placeholder="示例：https://www.pinterest.com/你的用户名/画板名称/">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" onclick="PinterestFeed.insertCode()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        
        // 显示模态框
        const bootstrapModal = new bootstrap.Modal(document.getElementById('pinterestFeedModal'));
        bootstrapModal.show();
        
        // 关闭后清理弹窗DOM
        document.getElementById('pinterestFeedModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    },
    
    insertCode: function() {
        const boardUrl = document.getElementById('pinterestBoardUrl').value.trim();
        if (!boardUrl) {
            alert('请输入有效的Pinterest画板URL');
            return;
        }
        
        // 解析URL提取画板ID
        const urlParts = new URL(boardUrl);
        const pathSegments = urlParts.pathname.split('/').filter(seg => seg);
        if (pathSegments.length < 2) {
            alert('无效的Pinterest画板URL');
            return;
        }
        const boardId = pathSegments[0] + '/' + pathSegments[1];
        
        // 生成嵌入代码
        const embedCode = `
            <a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/${boardId}/"></a>
        `;
        
        // 获取编辑器实例并插入代码
        const editor = Joomla.editors.instances[this.editorName];
        if (editor) {
            editor.insertText(embedCode);
        }
        
        // 确保Pinterest官方JS仅加载一次
        if (!window.pinterestFeedLoaded) {
            const script = document.createElement('script');
            script.src = 'https://assets.pinterest.com/js/pinit.js';
            script.async = true;
            document.body.appendChild(script);
            window.pinterestFeedLoaded = true;
        }
        
        // 关闭模态框
        bootstrap.Modal.getInstance(document.getElementById('pinterestFeedModal')).hide();
    }
};

5. 插件安装与启用 #

• 将plg_editorsxtd_pinterestfeed文件夹打包为ZIP文件
• 进入Joomla后台→扩展管理→安装，上传ZIP文件完成安装
• 在扩展管理→插件列表中，搜索并启用「Pinterest Feed」插件

内容的提问来源于stack exchange，提问作者Khuch Khana