时间戳

首页 > 解决方案 > FOSCKEditorBundle 有时有效，有时无效，与 bootsnav.js 冲突

javascript - FOSCKEditorBundle 有时有效，有时无效，与 bootsnav.js 冲突

问题描述

我正在使用 Symfony 4 和 webPack encore 包。我对 Fosckeditorbundle 有一个奇怪的问题，有时它运行良好，有时我在控制台中收到错误，我应该多次刷新浏览器，直到该包正常工作。

FOSCeditor 包不使用 Webpack Encore 处理，但问题出现在使用 Webpack Encore 包之后。

Uncaught TypeError: Cannot read property 'getClientRect' of null
at p.getClientRect (ckeditor.js:1253)
at p.queryViewport (ckeditor.js:1253)
at new p (ckeditor.js:1238)
at a.<anonymous> (ckeditor.js:1274)
at a.p (ckeditor.js:10)
at a.<anonymous> (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at $.<anonymous> (ckeditor.js:944)
at ckeditor.js:30

编辑：

我做了一些测试，发现问题来自bootsnav.js，当我删除它时，我没有错误。

标签： javascriptsymfonysymfony4webpack-encore

解决方案

如果你使用 Webpack Encore，你应该使用 FosCKEditorBundle 和 Webpack Encore。

  1. 删除您的 CKEditor 副本（不是 FosCKEditorBundle）。

  2. 通过Webpack Encore重新安装它。根据官方文档，您只需：

    纱线添加ckeditor@^4.0.0

然后在 webpack 配置中：

var Encore = require('@symfony/webpack-encore');

Encore
    // ...
    .copyFiles([
        {from: './node_modules/ckeditor/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
        {from: './node_modules/ckeditor/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[path][name].[ext]'}
    ])

;

如果需要，不要忘记更新 fos_ckeditor.yaml 中的配置路径：

fos_ck_editor:
    # ...
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"

这样，您将避免 js 冲突。

推荐阅读