Как изменить стандартную позицию всплывающих подсказок кнопок в CKEditor 5 - PullRequest
Новая
       7

Как изменить стандартную позицию всплывающих подсказок кнопок в CKEditor 5

0 голосов
/ 01 ноября 2018

Имея небольшую проблему со всплывающими подсказками в редакторе, прочитайте API, но не можете понять, о чем он говорит, и я не могу найти нигде примеров, которые я мог бы понять. Я настроил сборку Classic Editor, и все кнопки на панели инструментов имеют всплывающие подсказки с положением по умолчанию под кнопкой, и я хочу, чтобы только для этого экземпляра редактора можно было изменить положение всплывающей подсказки над кнопками. вместо. Экземпляр настроен так: 

ClassicEditor.create( document.querySelector( '#content' ) )
        .then( editor => {
            console.log( 'Editor was initialized', editor );
            this.annEditorInstance = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

Это создает экземпляр редактора, который настроен именно так, как я хочу, за исключением проблемы с всплывающей подсказкой. Как мне это изменить? Заранее спасибо.

1 Ответ

0 голосов
/ 02 ноября 2018

Существует два подхода к проблеме:

CSS

Элементы всплывающих подсказок имеют класс .ck-tooltip_s или .ck-tooltip_n. По умолчанию все всплывающие подсказки CKEditor 5 имеют первые, так что вы можете переопределить их в своих стилях и заставить их действовать как последние: 

<style>
    .ck.ck-tooltip.ck-tooltip_s {
        bottom: auto;
        top: calc(-1 * var(--ck-tooltip-arrow-size));
        transform: translateY( -100% );
    }

    .ck.ck-tooltip.ck-tooltip_s .ck-tooltip__text::after {
        top: auto;
        bottom: calc(-1 * var(--ck-tooltip-arrow-size));
        transform: translateX( -50% );
        border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
        border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
    }
</style>

JS

Пользовательский интерфейс редактора является структурой MVC (VM). Положение всплывающей подсказки можно контролировать с помощью JS и свойства Button#tooltipPosition ('s' или 'n').

например. Вы можете получить доступ к элементам пользовательского интерфейса панели инструментов с помощью editor.ui.view.toolbar и изменить их свойства: 

editor.ui.view.toolbar.items.map( item => item.tooltipPosition = 'n' )

но учтите, что не все элементы панели инструментов являются кнопками. Некоторые, например, выпадающие , поэтому вам нужно будет использовать item.buttonView.tooltipPosition = 'n' в этом случае. Поэтому, если вы действительно не хотите использовать JS, я бы выбрал простое решение CSS.

...