如何在Aurelia应用程序中集成CKEDITOR5

Question

[我试图将CKEditor5集成到我的Aurelia应用程序中，但没有成功。我尝试了许多指南，但没有成功。我也尝试过CKEditor官方指南，例如

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html

App.ts

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

export class App {


  constructor(){
    ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic ],
        toolbar: [ 'bold', 'italic' ]
    } )
    .then( editor => {
      console.log( "Editor Initialized",editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );
  }
  }

app.html

<template>

  <h1>${message}</h1>

  <div >
    <textarea name="editor" id="editor" cols="39" rows="21"></textarea>
  </div>
</template>

WebPack.config

由CKEditor官方指南提供有关webpack的信息，在进行一些搜索后，我在github上找到了一个helo，并在代码中进行了一些修改，如[]后，加载程序出现了错误

  rules: [
      {
        // Or /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/ if you want to limit this loader
        // to CKEditor 5 icons only.
        test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,

        use: [ 'raw-loader' ]
    },
    {
        // Or /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/ if you want to limit this loader
        // to CKEditor 5 theme only.
       test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
        use: [
            {
                loader: 'style-loader',
                options: {
                    injectType: 'singletonStyleTag'
                }
            },
            {
                loader: 'postcss-loader',
                options: styles.getPostCssConfig( {
                    themeImporter: {
                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                    },
                    minify: true
                } )
            },
        ]
    },
      // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
      // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss ? [{
          loader: MiniCssExtractPlugin.loader
        },
        'css-loader'
        ] : ['style-loader', ...cssRules]
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules
      },
      { test: /\.html$/i, loader: 'html-loader' },
      { test: /\.ts$/, loader: "ts-loader", options: { reportFiles: [ srcDir+'/**/*.ts'] }, include: karma ? [srcDir, testDir] : srcDir },
      // embed small images and fonts as Data Urls and larger ones as files:
      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
      // load these fonts normally, as files:
      { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
      ...when(coverage, {
        test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
        include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i],
        enforce: 'post', options: { esModules: true },
      })
    ]
  },

现在在控制台中，当检查DIV编辑器类时也没有错误，并且CKEditor类也显示出来，但是在View HTML上没有显示编辑器并且看到空白页。请为此提供帮助。

Answer 1

您的ckeditor创建代码不能在构造函数中。

应用的构造函数运行创建dom之前，因此找不到'#editor'。

将您的编辑器创建代码移动到attached()回调。

attached() {
  ClassicEditor.create...
}