使用TYPO3 13.3外包ckeditor5文件

Question

作为如何使用 TYPO3 调整 ckeditor5 文件的示例，我想用我自己的字形扩展特殊字符插件（它在供应商文件中工作，但在更新核心后会丢失）。

我有一个自定义配置

在我的 ext_localconf.php 中 $GLOBALS['TYPO3_CONF_VARS']['RTE']['预设']['ub_sitepackage'] = 'EXT:ub_sitepackage/Configuration/RTE/ckeditor-ub.yaml';

和 page.tscofig RTE.default.preset = ub_sitepackage

我的预设正在加载，一些基本调整将显示并按预期工作。

我根据需要调整特殊字符的想法是将 ckeditor5-special-characters.js 文件移动到我的站点包中 ub_sitepackage/资源/公共/JavaScript

如果我猜对了，我需要在 ub_sitepackage 的 /Configuration/JavaScriptModules.php 中添加一个条目（可能是因为 JavaScript ES6 的原因）

<?php

return [
    'dependencies' => ['core', 'backend'],
    'imports' => [
        '@ub-company/ub_sitepackage/' => 'EXT: ub_sitepackage/Resources/Public/JavaScript/ckeditor5-special-characters.js'
        ],
        ]
        

在我的 yaml 配置中导入文件

editor:
  config:
    importModules:  
      - { module: '@ub-company/ub_sitepackage/ckeditor5-special-characters.js' }
      
  

按钮已添加到工具栏

toolbar:
  items:
   ...
   - specialCharacters    

清除缓存后，ckeditor 使用原始文件。如果我注释掉该行

    //'@ckeditor/ckeditor5-special-characters' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-special-characters.js',
    

在vendor-JavaScriptModules.php中按钮不再显示。

提前感谢您的帮助

Answer 1

我刚刚使用 TYPO3 v13.4-dev 尝试过此操作，它与博客条目中概述的解决方案相同。我会尝试写一些注意事项：

我拨打了我的 TYPO3 分机

ckeditorplugin

。

1.创建 EXT:ckeditorplugin/Resources/Public/JavaScript/timestamp-plugin.js:

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

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

    init() {
        console.log('timestamp init.');
        const editor = this.editor;

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

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

            //Execute a callback function when the button is clicked
            button.on('execute', () => {
                const now = new Date();

                //Change the model using the model writer
                editor.model.change(writer => {

                    //Insert the text at the user's current position
                    editor.model.insertContent(writer.createText( now.toString()));
                });
            });

            return button;
        });
    }
}

重要注意事项：

• export default class Timestamp

  - 这很重要，需要在此处创建一个唯一的插件名称。默认导出也很重要。
• 放置

  Timestamp

  的地方都需要使用相同的插件名称（共出现5次）
• 如果您复制现有的 CKEditor 插件作为自己的插件，请确保使用唯一的新插件名称。

2.创建EXT：ckeditorplugin / Configuration / JavaScriptModules.php：

<?php
return [
    'dependencies' => ['backend'],
    'tags' => [
        'backend.form',
    ],
    'imports' => [
        '@myself/ckeditorplugin/timestamp-plugin.js' => 'EXT:ckeditorplugin/Resources/Public/JavaScript/timestamp-plugin.js'
    ],
];

注意事项：

• 标识符的格式必须类似于

  @(anyvendorname)/(typo3-extensionkey)/(anyfilename).js

  。它需要是唯一的，并且您应该将您的供应商名称和typo3-extensionkey与实际的TYPO3扩展命名相匹配。

3.调整您的 CKEditor YAML 以添加插件：

editor:
  config:
    importmodules:
        # ...
        - '@myself/ckeditorplugin/timestamp-plugin.js'

注意事项：

• 标识符需要与您在 JavaScriptModules.php 中定义的完全相同
• 您需要确保编辑正确的 CKEditor YAML 来添加密钥
• 用破折号添加密钥，并且不要使用像

  - { module: '@myself/ckeditorplugin/timestamp-plugin.js', exports: [ 'Timestamp' ] }

  这样的符号 - 因为我的示例不使用导出（它使用默认导出）。

4.调整您的 CKEditor YAML 以添加插件：

editor:
  config:
    toolbar:
      items:
        # ...
        - '|'
        -  Timestamp

注意事项：

• 准确使用文件中使用的标识符

  timestamp-plugin.js

  作为插件名称的标识符。这必须是唯一的，并且不会与任何内部 CKEditor 插件冲突。

5.执行composer dumpautoload，刷新TYPO3缓存

这非常重要，如果没有 'dumpautoload' 命令，新添加到

Resources/Public/

的文件将无法通过 HTTP 请求。需要刷新 TYPO3 缓存才能解释 javascript 导入映射。

6.刷新浏览器缓存

这可确保您创建的 JS 文件的任何可能的早期变体都得到更新。