Laravel Backpack 6中CKEditor5添加查看源码按钮及标签保留问题

一、修复source-editing插件找不到的错误 #

你遇到的plugincollection-plugin-not-found错误是因为Backpack的CKEditor5未正确加载已安装的source-editing插件，按以下步骤解决：

1. 同步插件文件到可访问目录
   在项目根目录的webpack.mix.js中添加复制规则，将npm安装的插件文件同步到Backpack的CKEditor资源目录：

mix.copy('node_modules/@ckeditor/ckeditor5-source-editing/build/sourceediting.js', 'public/vendor/backpack/ckeditor/plugins/source-editing/source-editing.js');

执行编译命令生效：

npm run dev

2. 在字段配置中注册插件并添加工具栏按钮
   替换之前的extra_plugins配置，直接通过editor_config指定加载的插件和工具栏按钮：

$this->crud->addField([
    'name' => 'body',
    'type' => 'ckeditor',
    'editor_config' => [
        // 包含CKEditor5核心插件+SourceEditing
        'plugins' => [
            'Essentials',
            'UploadAdapter',
            'Autoformat',
            'Bold',
            'Italic',
            'BlockQuote',
            'ImageUpload',
            'ImageInsert',
            'Link',
            'List',
            'Paragraph',
            'SourceEditing',
        ],
        // 将源码视图按钮加入工具栏
        'toolbar' => [
            'SourceEditing',
            'undo', 'redo',
            '|', 'bold', 'italic', 'link',
            '|', 'bulletedList', 'numberedList',
            '|', 'blockQuote',
            '|', 'imageUpload', 'imageInsert',
        ],
    ],
]);

二、允许富文本中添加div和class标签不被过滤 #

需要同时配置CKEditor5的HTML支持规则，以及Backpack自带的HTML清理器（若启用）：

1. 配置CKEditor5允许div和class
   在上述editor_config中添加htmlSupport规则：

'editor_config' => [
    // 保留之前的plugins和toolbar配置...
    'htmlSupport' => [
        'allow' => [
            [
                'name' => 'div',
                'attributes' => [
                    'class' => true,
                ],
            ],
            // 可选：允许所有标签携带class，取消下面注释即可
            // [
            //     'name' => '*',
            //     'attributes' => [
            //         'class' => true,
            //     ],
            // ],
        ],
    ],
],

2. 配置Backpack的HTML清理器（可选但推荐）
   若Backpack启用了HTML清理（默认开启），修改config/backpack/crud.php中的html_cleaner配置，允许div和class属性：

'html_cleaner' => [
    'enabled' => true,
    'config' => [
        'HTML.Allowed' => 'div[class],p,strong,em,a[href|target],ul,ol,li,blockquote,img[src|alt],h1,h2,h3,h4,h5,h6',
    ],
],

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