Как создать редактируемый Vue Widget для CKEditor 5?

Необходимо реализовать Accordion на Vue и интегрировать его в Widget для CKEditor. Чтобы содержимое слотов можно было редактировать средствами CKEditor. Шаблон примерно такой:

<template>
  <div class="accordion">
    <div class="accordion-header">
      <slot name="header"></slot>
    </div>
    <div class="accordion-content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

В документации имеется пример использования React компонентов в виджетах. Но в данном примере компонент просто рендерится в редакторе и больше никак изменить его средствами редактора нельзя.

const vueWrapper = viewWriter.createRawElement( 'section', null, function( domElement, domConverter ) {
                    domElement.append(new Vue({ render: h => h(Accordion) }).$mount().$el)
                } );

Даже если удается передать данные в слоты, редактировать их средствами CKEditor уже нельзя. Как при таком подходе разрешить CKEditor редактировать содержимое слотов не ясно.

Пробовал использовать библиотеку vue-custom-element и поддержку HTML от CKEditor (GeneralHtmlSupport), но ничего хорошего не вышло.

После преобразования model в editing view скорее всего теряется связь между моделью и представлением.

Если кто-то сталкивался с подобной задачкой, подскажите, пожалуйста, как можно это реализовать или в какую сторону копать?


Ответы (0 шт):