Как создать редактируемый 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 скорее всего теряется связь между моделью и представлением.
Если кто-то сталкивался с подобной задачкой, подскажите, пожалуйста, как можно это реализовать или в какую сторону копать?