ckeditor
Installing Ckeditor5 for vue
Hi I've insatlled both ckeditor5 and @ckeditor/ckeditor5-vue2 and I follwoed your article for vue2 and in the following my code
Vue.js
<template>
<div id="app">
<ckeditor
:editor="editor"
v-model="editorData"
@input='handleChange'
:config="editorConfig"
></ckeditor>
</div>
</template>
<script lang="ts" src="./ZidEditorV2.ts"></script>
import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';
import { Bold, ClassicEditor, Essentials, Italic, Paragraph } from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
const ZidEditorV2 = Vue.extend({
name: 'ZidEditorV2',
components: {
ckeditor: CKEditor.component,
},
props: {
apiKey: {
type: String,
},
height: {
type: Number,
default: 500,
},
disabled: {
type: Boolean,
},
value: {
type: String,
},
language: {
type: String,
},
tinyOptions: {
type: Object,
default: () => ({}),
},
},
data() {
return {
editor: ClassicEditor,
editorData: this.value,
editorConfig: {
toolbar: {
items: ['undo', 'redo', '|', 'bold', 'italic'],
},
plugins: [Bold, Essentials, Italic, Paragraph],
licenseKey: '#96350',
},
};
},
methods: {
handleChange(value: string) {
const changeEvent = {
value,
};
this.$emit('change', changeEvent);
},
},
});
export default ZidEditorV2;
package.json
"@ckeditor/ckeditor5-vue2": "^3.0.1",
"bootstrap": "^5.1.3",
"ckeditor5": "^42.0.0"
my vue version is "vue": "^2.6.12",
when I tried to run my project I got the following issue
| /**
| * The event name.
@ ./node_modules/ckeditor5/dist/ckeditor5.js 57:0-56 57:0-56
@ ./node_modules/ts-loader??ref--4-0!./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.vue
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./node_modules/@ckeditor/ckeditor5-word-count/dist/index.js 70:12
Module parse failed: Unexpected token (70:12)
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
| /**
| * The configuration of this plugin.
> */ _config;
| /**
| * The reference to a {@link module:ui/view~View view object} that contains the self-updating HTML container.
@ ./node_modules/ckeditor5/dist/ckeditor5.js 60:0-61 60:0-61
@ ./node_modules/ts-loader??ref--4-0!./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.vue
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./node_modules/@ckeditor/ckeditor5-paste-from-office/dist/index.js 723:12
Module parse failed: Unexpected token (723:12)
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
| * Normalizer for the content pasted from Microsoft Word.
| */ class MSWordNormalizer {
> document;
| hasMultiLevelListPlugin;
| /**
@ ./node_modules/ckeditor5/dist/ckeditor5.js 44:0-68 44:0-68
@ ./node_modules/ts-loader??ref--4-0!./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.vue
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./node_modules/@ckeditor/ckeditor5-adapter-ckfinder/dist/index.js 98:11
Module parse failed: Unexpected token (98:11)
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
| /**
| * FileLoader instance to use during the upload.
> */ loader;
| /**
| * Upload URL.
@ ./node_modules/ckeditor5/dist/ckeditor5.js 5:0-67 5:0-67
@ ./node_modules/ts-loader??ref--4-0!./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.ts?vue&type=script&lang=ts&
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.vue
@ ./src/components/molecules/ZidEditorV2/ZidEditorV2.stories.js
@ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Hi @afnanali1992 :wave: What version of Storybook, webpack, ts-loader and Typescript are you using? Since version 42.0.0 we ship ES2022 code, which webpack 4 can't handle by default.
Hi @filipsobol
This is our DevDependence
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@rollup/plugin-typescript": "^8.3.1",
"@storybook/addon-actions": "^6.3.8",
"@storybook/addon-docs": "^6.3.8",
"@storybook/addon-essentials": "^6.3.8",
"@storybook/addon-links": "^6.3.8",
"@storybook/preset-scss": "^1.0.3",
"@storybook/vue": "^6.3.8",
"@types/resize-observer-browser": "^0.1.7",
"@types/sortablejs": "^1.15.0",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.11",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"babel-loader": "^8.3.0",
"chromatic": "^5.9.1",
"commitizen": "^4.2.5",
"css-loader": "^5.2.7",
"cz-conventional-changelog": "^3.3.0",
"dotenv-cli": "^6.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"prettier": "^2.2.1",
"release-it": "^15.5.1",
"rimraf": "^3.0.2",
"rollup": "^2.48.0",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-vue": "^5.1.6",
"sass": "^1.34.1",
"sass-loader": "^8.0.2",
"style-loader": "^2.0.0",
"typescript": "~4.1.5",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
Unfortunately, this doesn't tell me what versions of Storybook, Webpack, and ts-loader are being used.
You might try updating typescript to version 5.0 or higher, as version 4.1 may not be able to parse ES2022. If that doesn't help, please provide a minimal reproduction so we can reproduce this error ourselves.
@filipsobol
ts-loader : no ts-loader
storybook: 6.3.8
there is no Webpack it's used behind the scenes by Storybook
we used the rollup of version 2.48.0
for typescript we can not upgrade to 5.0 since there are a lot of other dependences
Please provide a minimal reproduction repository so we can reproduce this error ourselves.
The issue lacks the feedback we asked for two weeks. Hence, we've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
@filipsobol I get the same error: #https://github.com/ckeditor/ckeditor5/issues/16650#issuecomment-2203361545
My project is using typescript v5.6.2 and vue2
Please provide a minimal reproducible sample on some platform like stackblitz, code sandbox, etc. or detailed setup steps if you want us to investigate deeper.
The issue lacks the feedback we asked for two weeks. Hence, we've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
Same issue here.
I have checked the files in build folder, seems like the end of comments(see those trailing slashes) appear in the same line of a property definition caused this error.
This is what in ts file:
This is what in js file:
You can see the difference after building.
I'm not sure whether this is the reason, but this is the clue I can find according to the error messages.
Any help will be appreciated!
The root of the problem is probably that one of the JavaScript/TypeScript loaders in your setup is unable to handle public class fields. They are supported in newer versions of every loader I can think of, and by all major browsers as of 2020.
The solution here is to update your webpack loaders to the latest version you can, or configure them to process node_modules folder (which is often excluded). If you need further help, please provide a minimal reproducible sample.
@filipsobol Issue has been solved according to your advice, thanks so much! 👍
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).