Как интегрировать CKEDITOR5 в приложение Aurelia - PullRequest
Новая
       63

Как интегрировать CKEDITOR5 в приложение Aurelia

0 голосов
/ 20 октября 2019

Я пытаюсь интегрировать 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 о веб-пакете я былполучая ошибки загрузчиков после некоторого поиска, я нашел helo на github и сделал некоторые изменения в коде, такие как 


  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 },
      })
    ]
  },

Теперь в консоли нет ошибок, и классы CKEditor также отображаются при проверке класса редактора DIV, но в ViewHTML не отображает редактор и видит пустую страницу. Пожалуйста, помогите об этом.

1 Ответ

0 голосов
/ 22 октября 2019

Ваш код создания ckeditor не может быть в конструкторе.

Конструктор приложения запускается до того, как dom был создан , поэтому он не может найти '#editor'.

Переместите ваш редактор создать код для attached() обратного вызова. 

attached() {
  ClassicEditor.create...
}
...