Question

CKEditor在iOS 10（Safari）中不起作用。

我找到了一个指南，该指南描述了如何将其转换为ES5并使其正常工作。我尝试使其与Laravel一起使用。该指南位于：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#option-building-to-es5-target

我尝试使用Laravel Mix使其工作，但这不是我最强的技能，尽管我已经尝试过了。从Laravels doc来看，该问题可以通过以下方式解决：

mix.webpackConfig({
    resolve: {
        module: {
                rules: [
                {
                     test: /ckeditor5-[^\/\\]+[\/\\].*\.js$/,
                     use: [
                             {
                                 loader: 'babel-loader',
                                 options: {
                                   presets: [ require( '@babel/preset-env' ) ]
                                 }
                             }
                          ]
                },
               ]
            }
      }
});

但是我无法使它正常工作。我还考虑过像下面解释的那样复制webpack.config.js：https://laravel.com/docs/5.8/mix#custom-webpack-configuration

但是，当我尝试解决该问题时（这与语法最相关），我再次感到怀疑。有没有人试图使用Laravel让CKEditor在Safari iOS 10中工作？

预先，谢谢。

Answer 1

我很早以前就知道您要这样做，但是今天我偶然遇到了同样的问题。

我在webpack.mix.js中以一些技巧解决了文档问题

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
    svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};


Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;

// exclude CKE regex from mix's default rules
for (let rule of rules) {
    if (rule.test.toString() === targetSVG.toString()) {
        rule.exclude = CKERegex.svg;
    }
    else if (rule.test.toString() === targetFont.toString()) {
        rule.exclude = CKERegex.svg;
    }
    else if (rule.test.toString() === targetCSS.toString()) {
        rule.exclude = CKERegex.css;
    }
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
    plugins: [
      new CKEditorWebpackPlugin({
        language: 'it'
      })
   ],
   module: {
    rules: [
        {
            test: /ckeditor5-[^\/\\]+[\/\\].+\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: Config.babel()
                }
            ]
        },
        {
            test: CKERegex.svg,
            use: [ 'raw-loader' ]
        },
        {
            test: CKERegex.css,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        singleton: true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: CKEStyles.getPostCssConfig({
                        themeImporter: {
                            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                        },
                        minify: true
                    })
                },
            ]
        }
    ]
}
});

请务必遵循文档来安装正确的软件包！

使用Webpack / Laravel混合将CKEditor转换为ES5

1 个答案: