ember.js 无法加载通过ember-auto-import导入CSS的模块

gudnpqoy  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(131)

我正在尝试构建一个ember 3.25应用程序，它通过ember-auto-import导入CkEditor
通过在package.json中添加以下代码，我能够使编辑器正常工作：

"@ckeditor/ckeditor5-build-classic": "^27.0.0",

并将以下内容添加到我的ember组件中：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

...

didInsertElement() {
  var editor = ClassicEditor
    .create( document.querySelector( '#editor' ), {
      ...
    });
}

但当我尝试通过以下方式添加ImageResize模块时：

"@ckeditor/ckeditor5-image": "^27.0.0",

在我的组件中（如此处所示）：

import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageResize from '@ckeditor/ckeditor5-image/src/image-resize';

我最初看到的错误如下：所以我运行了AUTO_IMPORT_VERBOSE=true ember serve
我现在看到错误，ckeditor不能@import嵌套.css：

ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css 6:0
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> @import "../../mixins/_unselectable.css";

或者使用ES6语法：

ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css 6:0
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> :root {

以及尝试包含SVG文件时出现的错误：

ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/icons/drag-handle.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0
 0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14
v14H1z"/></g></svg>

基于此消息：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

看起来我需要在ember中添加一些webpack加载程序，但是我真的不知道该怎么做。有人能帮忙吗？

ember.js

1条答案

按热度按时间
kcwpcxri

kcwpcxri1#

@ckeditor/ckeditor5-image/src/image导入一个CSS文件。由于CKEditor使用CSS-in-JS和其他不属于ECMAScript规范的功能，您需要配置webpack以支持它。CKEditor的文档包括一个最小配置示例：

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

module.exports = {
  plugins: [
    // ...

    new CKEditorWebpackPlugin({
      // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
      language: "pl",
    }),
  ],

  module: {
    rules: [
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"],
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
              attributes: {
                "data-cke": true,
              },
            },
          },
          {
            loader: "postcss-loader",
            options: styles.getPostCssConfig({
              themeImporter: {
                themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
              },
              minify: true,
            }),
          },
        ],
      },
    ],
  },
};

Ember自动导入允许您提供自定义Webpack配置作为autoImport.webpack配置密钥：

// ember-cli-build.js

let app = new EmberApp(defaults, {
  autoImport: {
    webpack: {
      // extra webpack configuration goes here
    },
  },
});

请联系Ember Auto Import的文档了解详细信息。
将两者结合起来，就像下面这样 * 应该 * 可行：

// ember-cli-build.js

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

let app = new EmberApp(defaults, {
  autoImport: {
    webpack: {
      plugins: [
        new CKEditorWebpackPlugin({
          // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
          language: "pl",
        }),
      ],
      module: {
        rules: [
          {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
            use: ["raw-loader"],
          },
          {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
            use: [
              {
                loader: "style-loader",
                options: {
                  injectType: "singletonStyleTag",
                  attributes: {
                    "data-cke": true,
                  },
                },
              },
              {
                loader: "postcss-loader",
                options: styles.getPostCssConfig({
                  themeImporter: {
                    themePath: require.resolve(
                      "@ckeditor/ckeditor5-theme-lark"
                    ),
                  },
                  minify: true,
                }),
              },
            ],
          },
        ],
      },
    },
  },
});

更新

这个方案几乎奏效了，但有几点需要注意：
正在从'@ckeditor/ckeditor 5-image/src/图像大小调整'导入ImageResize;“@ckeditor/ckeditor 5-build-classic”中的ClassicEditor无法正常工作！显然这会导致重复模块错误。
因此，相反，按照如何从源代码构建的说明进行操作之后，我发现ckeditor样式没有在ember中加载，直到我按照提取CSS的说明进行操作，然后一切都正常了！
以下是我的package.json中的相关部分：

"@ckeditor/ckeditor5-adapter-ckfinder": "^27.0.0",
"@ckeditor/ckeditor5-autoformat": "^27.0.0",
"@ckeditor/ckeditor5-basic-styles": "^27.0.0",
"@ckeditor/ckeditor5-block-quote": "^27.0.0",
"@ckeditor/ckeditor5-ckfinder": "^27.0.0",
"@ckeditor/ckeditor5-cloud-services": "^27.0.0",
"@ckeditor/ckeditor5-core": "^27.0.0",
"@ckeditor/ckeditor5-dev-utils": "^24.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2",
"@ckeditor/ckeditor5-easy-image": "^27.0.0",
"@ckeditor/ckeditor5-editor-classic": "^27.0.0",
"@ckeditor/ckeditor5-essentials": "^27.0.0",
"@ckeditor/ckeditor5-heading": "^27.0.0",
"@ckeditor/ckeditor5-image": "^27.0.0",
"@ckeditor/ckeditor5-indent": "^27.0.0",
"@ckeditor/ckeditor5-link": "^27.0.0",
"@ckeditor/ckeditor5-list": "^27.0.0",
"@ckeditor/ckeditor5-media-embed": "^27.0.0",
"@ckeditor/ckeditor5-paragraph": "^27.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^27.0.0",
"@ckeditor/ckeditor5-table": "^27.0.0",
"@ckeditor/ckeditor5-theme-lark": "^27.0.0",
"@ckeditor/ckeditor5-typing": "^27.0.0",
"css-loader": "^5.2.2",
"mini-css-extract-plugin": "^1.5.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.1.0",
"style-loader": "^2.0.0"

还有我的ember-cli-build.js文件：

const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
  const { styles } = require("@ckeditor/ckeditor5-dev-utils");
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

  module.exports = function (defaults) {
    let app = new EmberApp(defaults, {

     cssModules: {
       includeExtensionInModulePath: true,
     },

      sassOptions: {
       inputFiles: [  
         '/app/styles/app.scss',  
        ],
        includePaths: ['app', 'app/components']
      },
      // Add options here
      autoImport: {
        webpack: {
          plugins: [
           new CKEditorWebpackPlugin({
              // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
              // language: "en",
            }),
            new MiniCssExtractPlugin( {
              filename: 'ckeditor.css'
            } )
          ],
          module: {
            rules: [
              {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
                use: ["raw-loader"],
              },
              {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  'css-loader',
                  {
                    loader: "postcss-loader",
                    options: styles.getPostCssConfig({
                    themeImporter: {
                      themePath: require.resolve(
                        "@ckeditor/ckeditor5-theme-lark"
                      ),
                    },
                    minify: true,
                  }),
                },
              ],
            },
          ],
        },
      },
    },
  });

  return app.toTree();
};

还有我的ck-editor.js文件（我将其保存在与组件相同的目录中）：

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
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 EasyImagePlugin from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    EssentialsPlugin,
    UploadAdapterPlugin,
    AutoformatPlugin,
    BoldPlugin,
    ItalicPlugin,
    BlockQuotePlugin,
    // EasyImagePlugin,
    HeadingPlugin,
    ImagePlugin,
    ImageCaptionPlugin,
    ImageStylePlugin,
    ImageToolbarPlugin,
    ImageUploadPlugin,
        ImageResize,
    LinkPlugin,
    ListPlugin,
    ParagraphPlugin
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'uploadImage',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    language: 'en'
};

现在，从我的组件中，我可以调用：

import ClassicEditor from './ck-editor';

...

didInsertElement() {
  var editor = ClassicEditor
    .create( document.querySelector( '#editor' ), {
      ...
    });
}
赞(0）分享  回复(0）举报  2022-11-05
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com