@Nubbb

Как правильно настроить ckeditor5 в Nuxt?

Пытаюсь настроить свою версию 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>
  • Вопрос задан
  • 172 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы