如何将分页符功能添加到 TYPO3 扩展

Question

我正在尝试创建一个 TYPO3 扩展，将分页符功能添加到 TYPO3 v12 中的 ckeditor5 中。

我的扩展具有以下结构：

rte_ckeditor_pagebreak/配置/JavaScriptModules.php

<?php
return [
    'dependencies' => [
        'backend'
    ],
    'tags' => [
        'backend.form',
    ],
    'imports' => [
        '@test/typo3-rte-ckeditor-page-break/plugin.js' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/JavaScript/CkeditorPlugins/PageBreak/plugin.js',
        '@ckeditor/page-break.js' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5-page-break/src/index.js',
        '@ckeditor/page-break-core.js' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5/src/core.js',
        '@ckeditor/page-break-widget.js' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5/src/widget.js',
        '@ckeditor/page-break-ui.js' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5-ui/src/index.js',
    ],
];

rte_ckeditor_pagebreak/配置/RTE/PluginPageBreak.yaml

editor:
  config:
    importModules:
      - '@test/typo3-rte-ckeditor-page-break/plugin.js'

rte_ckeditor_pagebreak/资源/公共/JavaScript/CkeditorPlugins/PageBreak.plugin.js

import * as Core from '@ckeditor/ckeditor5-core';
import * as UI from '@ckeditor/ckeditor5-ui';

import { PageBreak } from "@ckeditor/page-break.js"

export default class PageBreakPlugin extends Core.Plugin {
    static pluginName = 'PageBreakPlugin';

    init() {
        const editor = this.editor;

        editor.config._config.plugins.push(PageBreak);

        // The button must be registered among the UI components of the editor
        // to be displayed in the toolbar.
        editor.ui.componentFactory.add(PageBreakPlugin.pluginName, () => {
            // The button will be an instance of ButtonView.
            const button = new UI.ButtonView();

            button.set({
                label: 'Page Break',
                withText: true
            });

            // Execute a callback function when the button is clicked
            button.on('execute', () => {
                editor.execute( 'pageBreak' );
            });

            return button;
        });
    }
}

当我单击我创建的分页按钮时，出现以下错误：“ckeditor5-utils.js?bust=1712928953:47 Uncaught CKEditorError: commandcollection-command-not-found {"commandName":"pageBreak"} ”

我希望该插件能够运行，而无需用户自己安装分页符功能（例如通过节点）。我的插件应该包含所有必要的代码，以便用户只需要安装我的扩展即可在TYPO3 v12中使用ckeditor5的分页符功能。

我做错了什么？

Answer 1

我们对文本部分语言功能做了类似的事情。你的 JavaScriptModules.php 一定有问题 查看并将您的存储库与我们的存储库进行比较 > https://github.com/Gugler-GmbH/ckeditor5-language/tree/main

在“@test/typo3-rte-ckeditor-page-break/plugin.js' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/JavaScript/CkeditorPlugins/PageBreak/plugin.js'”中添加一些自定义代码之前，我会尝试通过以下方式本地运行此插件：

#RTE Config
editor:
  config:
    importModules:
      - "@ckeditor/page-break"

#JavascriptModules.php
<?php
return [
    'dependencies' => [
        'backend'
    ],
    'tags' => [
        'backend.form',
    ],
    'imports' => [
        '@ckeditor/page-break' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5-page-break/src/index.js',
        '@ckeditor/page-break-core' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5/src/core.js',
        '@ckeditor/page-break-widget' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5/src/widget.js',
        '@ckeditor/page-break-ui' => 'EXT:rte_ckeditor_pagebreak/Resources/Public/Contrib/ckeditor/ckeditor5-ui/src/index.js',
    ],
  ];

不要忘记根据导入相应地更新这些js文件，否则ckeditor5将找不到这些文件。