Ckeditor从源码上构建的Webpack Encore不显示了。

Question

我试图用Webpack Encore从源码构建Ckeditor 5。我按照这里的说明进行了操作。

https:/ckeditor.comdocsckeditor5latestbuildsguidesintegrationadvanced-setup.html#bundler。

但是，我在工具的显示上遇到了问题，它看起来很奇怪，是这样的（首先，当我使用Ckeditor的内置工具时，它工作得很好）。它看起来很奇怪，像这样（首先，当我使用Ckeditor的内置工具时，它工作得很好）。

我认为问题出在CSS上，但我不知道哪里出了问题。我的Webpack编译得很好，控制台是空的。我的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"
    }

我的webpack.config.js是这样的。

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')
            }
        } )
    } )

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

我导入的CKeditor是这样的。

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 = [...

我不知道哪里出了问题... 也许有人能帮帮我? 非常感谢你，如果你有任何想法来解决这个问题。

祝你有个愉快的一天

Answer 1

好吧，我的错，我自己找到了答案。这与我的配置有关，也许是与其他插件（如Sortable或Dropzone）不匹配，因为当我把Ckeditor的导入移到我的主应用程序.js中时，它可以工作（之前是在Edit.js中）......真的很奇怪，但现在它可以工作。