如何在Code Igniter或TinyMCE编辑器中添加H5P交互组件？

核心思路 #

放弃重型的H5P独立PHP库，直接基于TinyMCE的自定义插件机制，对接现有H5P内容存储接口，实现轻量化的插入功能。

步骤1：创建TinyMCE自定义插件 #

在你的TinyMCE插件目录（示例路径：assets/tinymce/plugins/h5p/）下创建以下文件：

1.1 插件主逻辑文件 plugin.js #

tinymce.PluginManager.add('h5p', function(editor, url) {
    // 注册工具栏按钮
    editor.ui.registry.addButton('h5p', {
        text: '插入H5P组件',
        icon: 'embed',
        onAction: function() {
            // 打开选择组件的模态框
            editor.windowManager.open({
                title: '选择H5P交互组件',
                body: {
                    type: 'panel',
                    items: [
                        {
                            type: 'listbox',
                            name: 'h5p_id',
                            label: '选择组件',
                            values: [],
                            fetch: function(callback) {
                                // 调用CodeIgniter后端接口拉取H5P内容列表
                                fetch('/h5p/get_list')
                                    .then(res => res.json())
                                    .then(data => {
                                        const options = data.map(item => ({
                                            text: item.title,
                                            value: item.id
                                        }));
                                        callback(options);
                                    });
                            }
                        }
                    ]
                },
                buttons: [
                    { type: 'cancel', text: '取消' },
                    { type: 'submit', text: '插入', primary: true }
                ],
                onSubmit: function(api) {
                    const data = api.getData();
                    // 生成嵌入标记（可根据实际存储结构调整）
                    const embedCode = `<div class="h5p-block" data-h5p-id="${data.h5p_id}"></div>`;
                    editor.insertContent(embedCode);
                    api.close();
                }
            });
        }
    });

    return {
        getMetadata: function() {
            return { name: 'H5P插入插件' };
        }
    };
});

1.2 可选样式文件 plugin.css #

可添加用于美化模态框或按钮的自定义样式，比如：

.tox .tox-listbox__item {
    padding: 8px 12px;
}

步骤2：CodeIgniter后端接口实现 #

创建H5pController.php，提供H5P内容列表和渲染数据接口：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class H5pController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        // 可在此添加权限验证，比如仅管理员可访问
        $this->load->database();
    }

    // 获取H5P内容列表接口
    public function get_list() {
        $this->db->select('id, title');
        $this->db->from('h5p_contents'); // 替换为你的实际数据表名
        $query = $this->db->get();
        
        header('Content-Type: application/json');
        echo json_encode($query->result_array());
    }

    // 获取H5P渲染数据接口
    public function render($id) {
        $this->db->where('id', $id);
        $content = $this->db->get('h5p_contents')->row();
        
        header('Content-Type: application/json');
        echo json_encode([
            'library' => $content->library,
            'json_content' => $content->json_content
        ]);
    }
}

在config/routes.php中添加路由规则：

$route['h5p/get_list'] = 'H5pController/get_list';
$route['h5p/render/(:num)'] = 'H5pController/render/$1';

步骤3：配置TinyMCE加载插件 #

在编辑器初始化代码中，引入自定义插件并添加工具栏按钮：

tinymce.init({
    selector: '#course-editor', // 替换为你的编辑器DOM选择器
    plugins: 'h5p', // 加入自定义H5P插件
    toolbar: 'undo redo | bold italic | h5p', // 将按钮加入工具栏
    // 若插件路径非默认，需指定外部插件路径
    external_plugins: {
        'h5p': '/assets/tinymce/plugins/h5p/plugin.js'
    }
});

步骤4：前端渲染H5P组件 #

页面加载完成后，扫描嵌入标记并渲染H5P内容：

document.addEventListener('DOMContentLoaded', function() {
    const h5pBlocks = document.querySelectorAll('.h5p-block');
    h5pBlocks.forEach(block => {
        const h5pId = block.dataset.h5pId;
        fetch(`/h5p/render/${h5pId}`)
            .then(res => res.json())
            .then(data => {
                // 引入H5P核心库后调用渲染方法
                H5P.newRunnable(data.json_content, block, {
                    id: h5pId,
                    library: data.library
                });
            });
    });
});

注意：需在页面中引入H5P核心CSS和JS文件（可从H5P官方资源包中提取h5p.css和h5p.js，放入静态资源目录后引入）。

关键注意事项 #

• 确保你的H5P内容数据表包含id（主键）、title（组件标题）、library（H5P库标识）、json_content（组件JSON配置）这几个核心字段。
• 接口需加入权限控制，避免未授权用户获取或插入H5P内容。
• 若现有系统已存储H5P内容，可直接复用原有存储结构，无需额外迁移。

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