В CKEditor5, В преобразователе с понижением частоты, как вставить элемент представления в начале другого элемента представления? - PullRequest
Новая
       18

В CKEditor5, В преобразователе с понижением частоты, как вставить элемент представления в начале другого элемента представления?

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

Я хочу добавить «декоративные» (не семантические) элементы в представление редактирования в определенных позициях.

Я внес небольшое изменение в плагин Block-Widget, приведенный в руководстве CKEditor5. https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html

Я добавил 3 строки ("const badge" и т. Д.) В код преобразователя с понижением: 

_defineConverters() {
    const conversion = this.editor.conversion;

    // <simpleBox> converters
    conversion.for( 'upcast' ).elementToElement( {
        model: 'simpleBox',
        view: {
            name: 'section',
            classes: 'simple-box'
        }
    } );
    conversion.for( 'dataDowncast' ).elementToElement( {
        model: 'simpleBox',
        view: {
            name: 'section',
            classes: 'simple-box'
        }
    } );
    conversion.for( 'editingDowncast' ).elementToElement( {
        model: 'simpleBox',
        view: ( modelElement, viewWriter ) => {
            const section = viewWriter.createContainerElement( 'section', { class: 'simple-box' } );

            const badge = viewWriter.createContainerElement( 'span', { class: 'cause-badge', style: 'font-weight: bold' } );
            viewWriter.insert( viewWriter.createPositionAt( badge, 0 ), viewWriter.createText('Simple Box') );
            viewWriter.insert( viewWriter.createPositionAt( section, 0), badge );

            return toWidget( section, viewWriter, { label: 'simple box widget' } );
        }
    } );
//....

Я ожидал «Простое поле» в начале (вверху) виджета, поскольку я использую createPositionAt (section, 0). Но вместо этого я получаю его в конце (внизу) виджета (в Firefox). скриншот в Firefox

1 Ответ

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

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

Для редактирования нужного вам конвейера и UIElement, что позволяет визуализировать в области редактирования редактора произвольный HTML с помощью функции рендеринга.Вы можете проверить некоторые примеры использования функции рендеринга в пользовательских элементах пользовательского интерфейса POC .

Простая заглушка с такими функциями ниже: 

// Define schema element
schema.register( 'simpleBoxStars', {
    allowIn: 'simpleBox',
    allowAttributes: [ 'rating' ]
} );

conversion.for( 'upcast' ).elementToElement( {
    model: ( viewElement, writer ) => {
        return writer.createElement( 'simpleBoxStars', { rating: viewElement.getAttribute( 'data-rating' ) } );
    },
    view: {
        name: 'span',
        classes: 'simple-box-stars'
    }
} );

conversion.for( 'editingDowncast' ).elementToElement( {
    model: 'simpleBoxStars',
    view: ( modelElement, writer ) => {
        const uiSpan = writer.createUIElement( 'span', { class: 'simple-box-stars' }, function( domDocument ) {
            const domElement = this.toDomElement( domDocument );

            // Customize this for you needs
            domElement.innerHTML = `This many stars: <span class="stars">${ modelElement.getAttribute( 'rating' ) }</span>`;


            //
            domElement.addEventListener( 'click', evt => {
                // detect which star was clicked
                editor.model.change( writer => {
                    // Change model elment value, ie by using .setAttribute()
                } );
            } );

            return domElement;
        } );

        return uiSpan;
    }
} );

// For editor.getData() just output the data normally:
conversion.for( 'dataDowncast' ).elementToElement( {
    model: 'simpleBoxStars',
    view: {
        name: 'span',
        classes: 'simple-box-stars'
    }
} );
...