Как правильно использовать props компонента vue-ckeditor5 импортированного локально во Vue.js?

Question

[Евгений Меркуль]

Добрый день!
Использую компонент vue-ckeditor5 для ckeditor5 во Vue.js 2.
Объявил компонент локально в отдельном файле cked.vue

<template>
  <div>
    <vue-ckeditor type="classic" v-model="content"
      :editors="editors1"
      :toolbar-container="toolbar"
      :config="conf">
    </vue-ckeditor>
  </div>
</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

export default {
  components: { 'vue-ckeditor': VueCkeditor.component },
  data () {
    return {
      content: 'hello',
      editors1: {
        classic: ClassicEditor
      },
      toolbar: 'bold',
      conf: { language: 'ru' }
    }
  }
}
</script>

Компонент работает, точнее отображается и реагирует:

Но! В props'ах я передал
toolbar: 'bold',
conf: { language: 'ru' } ,
что должно было оставить в панели тулбара только B и сделать язык интерфейса русским.
А этого не произошло.. Не могу понять, в чем дело. Второй день бьюсь об эту вроде бы простую задачу. В интернете ответа не нашел, поэтому пришел к вам за помощью.
Вот ссылка на документацию по vue-ckeditor5, которой пользовался https://www.npmjs.com/package/vue-ckeditor5
(как видно, не под копирку сделал, может здесь и кроется проблема)
Могу с уверенностью сказать, что проблема не в самом ckeditor5, а именно во vue-ckeditor5, т.к. пробовал общаться и настраивать ckeditor5 напрямую без vue-ckeditor5. (https://github.com/drone076/vue2-ckeditor5/blob/ma...
И все получилось, смог настроить под себя тулбар.
Еще пробовал в самом vue-ckeditor5.js менять дефолтные значения передаваемых props'ов. Например, менял тот же { language: 'en' } на { language: 'ru' }. Но тоже никак не отреагировал компонент.
Устанавливал компонент через npm:
npm install vue-ckeditor5
npm install --save @ckeditor/ckeditor5-build-balloon @ckeditor/ckeditor5-build-classic
Так же пробовал объявлять компоненты глобально в main.js в точности по документации => эффекта с настройкой никакого.
Чувствую, что где-то совсем маленькая загвоздка с настройкой или использованием, но не вижу..
Буду благодарен за любую помощь или подсказку!

Answer 1

[Klein Maximus]

toolbarContainer - CSS-selector of DOM-element for CKEditor toolbar. The element is searched by Document.querySelector()

Судя по документации, toolbarContainer нужен для прикрепления тулбара к определённому элементу через querySelector, а чтобы настроить сам туллбар надо использовать config.

А если попробовать так:

<template>
  <div>
    <vue-ckeditor
      v-model="content"
      :editors="editors1"
      :config="conf"
      type="classic"
    />
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

export default {
  components: { 'vue-ckeditor': VueCkeditor.component },
  data () {
    return {
      content: 'hello',
      editors1: {
        classic: ClassicEditor
      },
      conf: {
        language: 'ru',
        toolbar: [ 'bold' ],
      }
    }
  }
}
</script>

По языку пока не понятно, но есть предположение, что Вы его просто не подключили.

Comments

[Евгений Меркуль]

Благодарю, Вас! Таким образом тулбар удалось настроить!
С переключением языка пока не ясно. Но в папках ckeditor5-build-classic лежит ru.js, перевод в нем есть.
В любом случаем, первоочередным было настроить сам тулбар, а язык второстепенен.
Еще раз спасибо!

[Евгений Меркуль]

Язык таким образом подключается:

import '../../node_modules/@ckeditor/ckeditor5-build-classic/build/translations/ru.js'

[Klein Maximus]

Евгений Меркуль, а просто import '@ckeditor/ckeditor5-build-classic/build/translations/ru.js' не работает?

[Евгений Меркуль]

Klein Maximus, да, так тоже работает!