从源网页包重新编码生成的Ckeditor未正确显示

我正在尝试从源代码Ckeditor 5构建网页包Encore。我按照这里的指示：

但是我对工具的显示有问题。它看起来像这样奇怪（首先，当我使用来自Ckeditor的内置程序时，它工作正常）：

我认为这个问题与CSS有关，但我看不出有什么不对。我的网页编译得很好，控制台是空的。My package.json如下所示：

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/helper-call-delegate": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@symfony/webpack-encore": "^0.29.1",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.4.1",
    "core-js": "^3.0.0",
    "jquery": "^3.5.1",
    "node-sass": "^4.13.1",
    "popper.js": "^1.16.1",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "7.0.1",
    "webpack-notifier": "^1.6.0",
    "@ckeditor/ckeditor5-dev-utils": "^13.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
    "raw-loader": "^3.1.0",
    "postcss-loader": "^3.0.0"
"dependencies": {
        "@ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
        "@ckeditor/ckeditor5-autoformat": "^19.0.0",
        "@ckeditor/ckeditor5-easy-image": "^19.0.0",
        "@ckeditor/ckeditor5-alignment": "^19.0.0",
        "@ckeditor/ckeditor5-autosave": "^19.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^19.0.0",
        "@ckeditor/ckeditor5-block-quote": "^19.0.0",
        "@ckeditor/ckeditor5-core": "^19.0.0",
        "@ckeditor/ckeditor5-editor-classic": "^19.0.0",
        "@ckeditor/ckeditor5-essentials": "^19.0.0",
        "@ckeditor/ckeditor5-font": "^19.0.0",
        "@ckeditor/ckeditor5-heading": "^19.0.0",
        "@ckeditor/ckeditor5-indent": "^19.0.0",
        "@ckeditor/ckeditor5-link": "^19.0.0",
        "@ckeditor/ckeditor5-list": "^19.0.0",
        "@ckeditor/ckeditor5-media-embed": "^19.0.0",
        "@ckeditor/ckeditor5-paragraph": "^19.0.0",
        "@ckeditor/ckeditor5-paste-from-office": "^19.0.0",
        "@ckeditor/ckeditor5-table": "^19.0.0",
        "@ckeditor/ckeditor5-theme-lark": "^19.0.0",
        "@ckeditor/ckeditor5-typing": "^19.0.0",
        "@ckeditor/ckeditor5-image": "^19.0.0",
        "bootstrap-datepicker": "^1.9.0",
        "dropzone": "^5.7.0",
        "leaflet": "^1.6.0",
        "leaflet-ajax": "^2.1.0",
        "sortablejs": "^1.10.2",
        "sweetalert2": "^9.10.12"
    }

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')
    .addEntry('Form', './assets/js/modules/Form.js')
    .addEntry('Edit', './assets/js/modules/Edit.js')
    .splitEntryChunks()


    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    .copyFiles({
                 from: './assets/img'})


    // Use raw-loader for CKEditor 5 SVG files.
    .addRule( {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        loader: 'raw-loader'
    } )

    // Configure other image loaders to exclude CKEditor 5 SVG files.
    .configureLoaderRule( 'images', loader => {
        loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
    } )

    // Configure PostCSS loader.
    .addLoader({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        loader: 'postcss-loader',
        options: styles.getPostCssConfig( {
            themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
            }
        } )
    } )

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [...

我的webpack.config.js如下所示：

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/helper-call-delegate": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@symfony/webpack-encore": "^0.29.1",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.4.1",
    "core-js": "^3.0.0",
    "jquery": "^3.5.1",
    "node-sass": "^4.13.1",
    "popper.js": "^1.16.1",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "7.0.1",
    "webpack-notifier": "^1.6.0",
    "@ckeditor/ckeditor5-dev-utils": "^13.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
    "raw-loader": "^3.1.0",
    "postcss-loader": "^3.0.0"
"dependencies": {
        "@ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
        "@ckeditor/ckeditor5-autoformat": "^19.0.0",
        "@ckeditor/ckeditor5-easy-image": "^19.0.0",
        "@ckeditor/ckeditor5-alignment": "^19.0.0",
        "@ckeditor/ckeditor5-autosave": "^19.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^19.0.0",
        "@ckeditor/ckeditor5-block-quote": "^19.0.0",
        "@ckeditor/ckeditor5-core": "^19.0.0",
        "@ckeditor/ckeditor5-editor-classic": "^19.0.0",
        "@ckeditor/ckeditor5-essentials": "^19.0.0",
        "@ckeditor/ckeditor5-font": "^19.0.0",
        "@ckeditor/ckeditor5-heading": "^19.0.0",
        "@ckeditor/ckeditor5-indent": "^19.0.0",
        "@ckeditor/ckeditor5-link": "^19.0.0",
        "@ckeditor/ckeditor5-list": "^19.0.0",
        "@ckeditor/ckeditor5-media-embed": "^19.0.0",
        "@ckeditor/ckeditor5-paragraph": "^19.0.0",
        "@ckeditor/ckeditor5-paste-from-office": "^19.0.0",
        "@ckeditor/ckeditor5-table": "^19.0.0",
        "@ckeditor/ckeditor5-theme-lark": "^19.0.0",
        "@ckeditor/ckeditor5-typing": "^19.0.0",
        "@ckeditor/ckeditor5-image": "^19.0.0",
        "bootstrap-datepicker": "^1.9.0",
        "dropzone": "^5.7.0",
        "leaflet": "^1.6.0",
        "leaflet-ajax": "^2.1.0",
        "sortablejs": "^1.10.2",
        "sweetalert2": "^9.10.12"
    }

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')
    .addEntry('Form', './assets/js/modules/Form.js')
    .addEntry('Edit', './assets/js/modules/Edit.js')
    .splitEntryChunks()


    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    .copyFiles({
                 from: './assets/img'})


    // Use raw-loader for CKEditor 5 SVG files.
    .addRule( {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        loader: 'raw-loader'
    } )

    // Configure other image loaders to exclude CKEditor 5 SVG files.
    .configureLoaderRule( 'images', loader => {
        loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
    } )

    // Configure PostCSS loader.
    .addLoader({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        loader: 'postcss-loader',
        options: styles.getPostCssConfig( {
            themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
            }
        } )
    } )

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [...

我从webpack文件中删除了CKEditorWebpackPlugin，因为它在webpack的编译阶段带来了错误，但问题已经存在了

我导入的CKeditor如下所示：

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/helper-call-delegate": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@symfony/webpack-encore": "^0.29.1",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.4.1",
    "core-js": "^3.0.0",
    "jquery": "^3.5.1",
    "node-sass": "^4.13.1",
    "popper.js": "^1.16.1",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "7.0.1",
    "webpack-notifier": "^1.6.0",
    "@ckeditor/ckeditor5-dev-utils": "^13.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
    "raw-loader": "^3.1.0",
    "postcss-loader": "^3.0.0"
"dependencies": {
        "@ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
        "@ckeditor/ckeditor5-autoformat": "^19.0.0",
        "@ckeditor/ckeditor5-easy-image": "^19.0.0",
        "@ckeditor/ckeditor5-alignment": "^19.0.0",
        "@ckeditor/ckeditor5-autosave": "^19.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^19.0.0",
        "@ckeditor/ckeditor5-block-quote": "^19.0.0",
        "@ckeditor/ckeditor5-core": "^19.0.0",
        "@ckeditor/ckeditor5-editor-classic": "^19.0.0",
        "@ckeditor/ckeditor5-essentials": "^19.0.0",
        "@ckeditor/ckeditor5-font": "^19.0.0",
        "@ckeditor/ckeditor5-heading": "^19.0.0",
        "@ckeditor/ckeditor5-indent": "^19.0.0",
        "@ckeditor/ckeditor5-link": "^19.0.0",
        "@ckeditor/ckeditor5-list": "^19.0.0",
        "@ckeditor/ckeditor5-media-embed": "^19.0.0",
        "@ckeditor/ckeditor5-paragraph": "^19.0.0",
        "@ckeditor/ckeditor5-paste-from-office": "^19.0.0",
        "@ckeditor/ckeditor5-table": "^19.0.0",
        "@ckeditor/ckeditor5-theme-lark": "^19.0.0",
        "@ckeditor/ckeditor5-typing": "^19.0.0",
        "@ckeditor/ckeditor5-image": "^19.0.0",
        "bootstrap-datepicker": "^1.9.0",
        "dropzone": "^5.7.0",
        "leaflet": "^1.6.0",
        "leaflet-ajax": "^2.1.0",
        "sortablejs": "^1.10.2",
        "sweetalert2": "^9.10.12"
    }

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')
    .addEntry('Form', './assets/js/modules/Form.js')
    .addEntry('Edit', './assets/js/modules/Edit.js')
    .splitEntryChunks()


    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    .copyFiles({
                 from: './assets/img'})


    // Use raw-loader for CKEditor 5 SVG files.
    .addRule( {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        loader: 'raw-loader'
    } )

    // Configure other image loaders to exclude CKEditor 5 SVG files.
    .configureLoaderRule( 'images', loader => {
        loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
    } )

    // Configure PostCSS loader.
    .addLoader({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        loader: 'postcss-loader',
        options: styles.getPostCssConfig( {
            themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
            }
        } )
    } )

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [...

我看不出有什么不对。。。也许有人能帮我？如果你有任何解决这个问题的想法，非常感谢

---

祝你今天愉快好吧，我的错，我自己找到了答案。这与我的配置有关，可能与其他插件（如Sortable或Dropzone）不匹配，因为当我将Ckeditor的导入移动到我的主app.js时，它可以工作（以前是在Edit.js中）…非常奇怪，但现在它可以工作了。

同样的问题。我只有一个JS文件，无处移动导入：(