CKEDITOR5 Несколько экземпляров с подключаемым модулем и атрибутами - PullRequest
Новая
       32

CKEDITOR5 Несколько экземпляров с подключаемым модулем и атрибутами

0 голосов
/ 14 апреля 2020

У меня не было никаких проблем, когда я пытался настроить свою собственную систему связи с CKEDITOR5, используя VUEjs.

После нескольких дней возни с официальными кодами плагинов ссылок, я понял, что Мне нужно.

Так что мне нужно, когда я нажимаю кнопку ссылки, мне нужно открыть модальное окно, которое дает различные варианты. У меня это работает, похоже, это

enter image description here

Тип ссылки, которую вы можете выбрать из ссылок «электронная почта», «внутренние» и «внешние». Это похоже на Ck4.
Как вы можете видеть, вы также можете установить атрибуты title, id и class для ссылки.
Здесь все становится странным.

Я следовал различным учебникам в Stack Overflow, а также в документации по CK, и у меня ничего не было такого решения, которое бы соответствовало моим потребностям.

Я наконец смог заставить работать дополнительные атрибуты, добавив ручные декораторы ссылок и немного обновив плагин ядра для передать эти переменные командам ...

Этот пользовательский метод вызывается через событие vue, передающее значения из модального сквозного события. это в 'linkui. js' 

_save(formView, attrs) {
  const value = attrs ? attrs.href : this.formView.urlInputView.inputView.element.value;
  const switches = formView.getDecoratorSwitchesState();
  switches.linkAddAdditionalAttribute = attrs;
   this.editor.execute( 'link', value, switches);
   this._closeFormView();
}

В команде link. js Я настроил setAttributes, чтобы просмотреть атрибуты из команды 

truthyManualDecorators.forEach( item => {
  writer.setAttribute( item, manualDecoratorIds[item], range );
} );

И затем наконец, в связывании. js Я настроил ручные декораторы, чтобы установить эти атрибуты для элемента 

editor.conversion.for( 'downcast' ).attributeToElement( {
    model: decorator.id,
    view: ( manualDecoratorName, writer) => {
        if ( manualDecoratorName && typeof manualDecoratorName === 'object') {
            const attributes = {... manualDecorators.get( decorator.id ).attributes };
            attributes.class = manualDecoratorName.class;
            attributes.id = manualDecoratorName.id;
            attributes.title = manualDecoratorName.title;
            const element = writer.createAttributeElement( 'a', attributes, { priority: 5 } );
            writer.setCustomProperty( 'link', true, element );
            return element;
        }
} } );

Декоратор 

{
  mode: 'manual',
  id: 'linkAddAdditionalAttribute',
  label: 'Additional Attributes',
  attributes: {
    class: null,
    title: null,
    id: null
  }
}

Теперь, наконец, все работает для меня, несколько ссылок работать и может редактировать их по отдельности, источник, видимый для тестирования enter image description here

Так вот, где проблема возникает.

Если у меня есть несколько экземпляров, и я добавляю ссылку, все экземпляры обновляются при добавлении ссылки, и что еще хуже, если в Instance1 есть ссылка, и я добавляю ссылку на Instance2, Instance1's ссылка обновляется до ссылки Instance2. Если в каком-либо экземпляре ссылки нет, все экземпляры получают добавленную ссылку.

Я в полной растерянности относительно того, куда go отсюда. Есть ли какой-нибудь совет или лучший способ разрешить использование пользовательских атрибутов ссылок, подобных этому?

спасибо

...