How to integrate CKEDITOR5 in Aurelia Application - ckeditor

Question

I am trying to integrate CKEditor5 in my Aurelia Application but no sucess.I tried many guides but getting no success.I tried CKEditor official guides too like as
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
By official guide of CKEditor about webpack i was getting errors of loaders after some search i found a helo on github and did some modification in code like as
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 },
})
]
},
Now in console getting no error and CKEditor classes are also showing when inspecting DIV editor class but on View HTML showing no editor and seeing blank page.Kindly do help about this.

Answer 1

Your ckeditor create code cannot be in constructor.
The constructor of app runs before the dom was created, so it could not find '#editor'.
Move your editor create code to attached() callback.
attached() {
ClassicEditor.create...
}