Ckeditor5: getting error when adding the plugin to `ckeditor5-editor-classic`

[deepak-khopade-isdr]

I have added import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice' and then:
plugins: [ PasteFromOffice ], but getting error:

_getEmitterId@file:///C:/ckeditor/dist/bundle.js:63383:2
listenTo@file:///C:/ckeditor/dist/bundle.js:63008:9
init@file:///C:/ckeditor/dist/bundle.js:65885:3
app.js:47

    js app.js:47 

I have no idea what I am missing here. Please help.

PS: if i comment this line and dont add the plugin, its just working fine. In fact this plugin is also installed successfully using npm.

[jodator]

Hi @deepak-khopade-isdr.

To add a plugin to an existing build use config.extraPlugins instead of config.plugins to load additional plugins (ie those that are not present in the build already.

```js
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';

CustomEditor.create( 'editor', {
extraPlugins: [ PastFromOffice ]
// ...
} );

[jodator]

ps.: The PasteFromOffice is already present in our builds so you don't have to add it when using one of them (ie ClassicEditor).

[deepak-khopade-isdr]

I am not using existing build, but using '@ckeditor/ckeditor5-editor-classic/src/classiceditor'

[deepak-khopade-isdr]

I mean I am creating my own version with custom plugins and toolbar buttons.

[deepak-khopade-isdr]

when I tried to see what all plugins are added console.log(editor.plugins);

I don't see PasteFromWord is added by default.

[deepak-khopade-isdr]

@jodator : can you please reopen this issue and see my recent comments?

[Reinmar]

I'm sorry for closing the issue prematurely. It sounded like a quite typical problem so we thought we know the answer.

Could you post your package.json, webpack.config.js and the entry point JS file? It will be easier for us to debug it this way.

[deepak-khopade-isdr]

Here you go:

package.json

{
  "name": "dk-ckeditor",
  "version": "1.0.0",
  "description": "DK CKEditor Implementation",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ckeditor/ckeditor5-alignment": "^11.0.0",
    "@ckeditor/ckeditor5-autoformat": "^11.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
    "@ckeditor/ckeditor5-clipboard": "11.0.0",
    "@ckeditor/ckeditor5-core": "^11.1.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.0",
    "@ckeditor/ckeditor5-editor-classic": "^11.0.2",
    "@ckeditor/ckeditor5-engine": "^12.0.0",
    "@ckeditor/ckeditor5-enter": "^11.0.0",
    "@ckeditor/ckeditor5-essentials": "^10.1.3",
    "@ckeditor/ckeditor5-font": "^11.0.0",
    "@ckeditor/ckeditor5-heading": "^11.0.0",
    "@ckeditor/ckeditor5-highlight": "^11.0.0",
    "@ckeditor/ckeditor5-image": "^12.0.0",
    "@ckeditor/ckeditor5-list": "^12.0.0",
    "@ckeditor/ckeditor5-paragraph": "^10.0.4",
    "@ckeditor/ckeditor5-paste-from-office": "^11.0.0",
    "@ckeditor/ckeditor5-table": "^11.0.1",
    "@ckeditor/ckeditor5-theme-lark": "^12.0.0",
    "@ckeditor/ckeditor5-typing": "^12.0.0",
    "@ckeditor/ckeditor5-ui": "^11.2.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^1.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "webpack-cli": "^3.2.3"
  }
}

webpack.config.js:

// webpack.config.js

'use strict';

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

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    watch: true,

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

                use: [ 'raw-loader' ]
            },
            {
                // Or /ckeditor5-[^/]+\/theme\/[^/]+\.css$/ if you want to limit this loader
                // to CKEditor 5 theme only.
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    },
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};

[deepak-khopade-isdr]

Entry point:

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'
import Image from '@ckeditor/ckeditor5-image/src/image'
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'
import insertImage from './plugins/insertImage/insertImage'
import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter'
// import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'
// import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'
import Table from '@ckeditor/ckeditor5-table/src/table'
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'
import List from '@ckeditor/ckeditor5-list/src/list'
import Font from '@ckeditor/ckeditor5-font/src/font'

import {getHtmlFromRenderingServer} from './renderingApi/rendering'

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Font, Bold, Italic, Image, insertImage, ImageCaption, Table, TableToolbar, Alignment, Autoformat, List ],
        toolbar: [ 'fontfamily', 'fontsize', '|', 'bold', 'italic', '|', 'insertImage', '|',
            'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells',
            'alignment', 'numberedList', 'bulletedList' ]
    } )
    .then( editor => {
        //console.log( 'Editor was initialized...', editor );
        const writer = new UpcastWriter();
        editor.plugins.get( 'Clipboard' ).on( 'inputTransformation', ( evt, data ) => {
            const dataTransfer = data.dataTransfer;
            const rtfContent = dataTransfer.getData( 'text/rtf' );

            if ( !rtfContent ) {
                return;
            }

            if (rtfContent && rtfContent.length > 0) {
                // do some conversion as per our specs
            } else {
                alert('Invalid text for this editor.');
            }
        } );
    } )
    .catch( error => {
        console.error( error.stack )
    } );

[Reinmar]

This is definitely outdated:

    "@ckeditor/ckeditor5-essentials": "^10.1.3",

The latest version is 11.0.0.

Please run node-check-updates and upgrade all CKEditor 5 packages, remove node_modules and run npm i again.

[deepak-khopade-isdr]

Now my whole build is broken :(
Getting error on initialization:

init@file:///C:/dk-ckeditor/dist/bundle.js:67439:5

[Reinmar]

I'm sorry, but that's not an error – that's a piece of the stacktrace. You need to post more than this.

Also, if upgrading didn't help I'd really recommend starting from a fresh build that works and seeing at what point it starts breaking.

[deepak-khopade-isdr]

Did everything I could from cleaning the cache to install few times, but still its now not initializing the editor anymore.
Error in bundle.js

Its coming from shiftenter.js line 46

[Reinmar]

This error means that you still use some outdated packages. Can you paste your updated package.json?

Sent from my iPhone

On 1 Mar 2019, at 18:12, Deepak Khopade [e-mail] wrote:

Did everything I could from cleaning the cache to install few times, but still its now not initializing the editor anymore.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or mute the thread.

[deepak-khopade-isdr]

You are right; I had few packages old as the sample code was copied from documentation and I didn't notice it. All good now 👍 Thanks a lot!!