ckeditor5 создать элемент "изображение" с атрибутами - PullRequest
Новая
       3

ckeditor5 создать элемент "изображение" с атрибутами

0 голосов
/ 01 июня 2019

Я пытаюсь создать собственный плагин для вставки изображения из моего уже встроенного медиа-браузера.Я хотел бы прикрепить некоторые атрибуты к изображению.Что бы я ни пробовал, он вставляет только изображение с атрибутами src и alt.Другими словами, в моем изображении всегда отсутствуют атрибуты data-source и class.Я использовал ключ атрибута данных как dataSource, но он также не работает. 

const imageElement = writer.createElement( 'image',  {
    'src': src,
    'alt': alt,
    'data-sources': dataSources,
    'class': cls
} );
editor.model.insertContent( imageElement, editor.model.document.selection );

Любые идеи или предложения будут с благодарностью.

1 Ответ

1 голос
/ 03 июля 2019

Вам нужно сделать 2 вещи для обработки новых атрибутов изображения.

Во-первых, вам необходимо расширить схему соответствующими правилами, которые сообщают модели, что данные атрибуты разрешены вредактор.

Во-вторых, нужно сообщить редактору, как преобразовать данный атрибут в структуру модели и наоборот с правильными конвертерами.

К сожалению, конвертеры изображений довольно сложны, потому что изображение всегда оборачивается <figure>.Ниже вы можете найти код и ссылку на рабочий пример того, как вы можете создавать такие конвертеры (конвертеры создаются на основе исходного кода плагина изображения для CKEditor5).В этом примере атрибут data-source сохраняется в модели как атрибут dSource элемента изображения. 

editor.model.schema.extend( 'image', { allowAttributes: 'dSource' } );

editor.conversion.for( 'upcast' ).attributeToAttribute( {
    view: 'data-source',
    model: 'dSource'
} );

editor.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'attribute:dSource:image', ( evt, data, conversionApi ) => {
        if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
            return;
        }

        const viewWriter = conversionApi.writer;
        const figure = conversionApi.mapper.toViewElement( data.item );
        const img = figure.getChild( 0 );

        if ( data.attributeNewValue !== null ) {
            viewWriter.setAttribute( 'data-source', data.attributeNewValue, img );
        } else {
            viewWriter.removeAttribute( 'data-source', img );
        }
    } );
} );

Ссылка на рабочий образец: https://codepen.io/msamsel/pen/pXKRed?editors=1010

...