Пытаюсь настроить свою версию ckeditor5 в nuxt.js по
этой иснтрукции
но ничего не срабатывает, в консоле выдает
Cannot use import statement outside a module
вот мой nuxt.js.config
const path = require('path')
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
const { styles } = require('@ckeditor/ckeditor5-dev-utils')
export default {
server: {
port: process.env.APP_PORT, // default: 3000
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: '~/plugins/vue-ckeditor.js', mode: 'client' },
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
plugins: [
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: 'ru'
})
],
module: {
rules: [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ['raw-loader']
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
},
]
}
]
}
}
модуль пытаюс вызвать вот так
<script lang="ts">
import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
export default Vue.extend({
data() {
return {
form: {
path: '',
image: '',
title: '',
description: '',
meta_title: '',
meta_description: '',
text: 'sdasdasdas',
},
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
],
toolbar: {
items: ['bold', 'italic', 'link', 'undo', 'redo'],
},
},
}
},
})
</script>