如何更改 CKEditor 5 中按钮工具提示的默认位置

Question

编辑器中的工具提示有一个小问题，请阅读 api 但无法理解它在说什么，而且我似乎也无法在任何地方找到我能理解的示例。我已经设置了一个经典编辑器构建，并且工具栏上的所有按钮都有工具提示，默认位置在按钮下方，我希望能够仅针对这个编辑器实例，将工具提示位置更改为按钮上方反而。实例设置如下：

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

这将创建一个完全按照我的要求设置的编辑器实例，但工具提示的问题除外。我该如何改变这个？提前致谢。

Answer 1

有两种解决问题的方法：

CSS

工具提示元素有 .ck-tooltip_s 或 .ck-tooltip_n class。默认情况下，所有 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

UI of the editor is an MVC(VM) structure. The position of the tooltip can be controlled using the JS and the Button#tooltipPosition 属性 ('s' or 'n').

例如您可以使用 editor.ui.view.toolbar 访问工具栏 UI 元素并更改它们的属性：

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

但请注意，并非所有工具栏项都是按钮。例如，有些是 dropdowns，因此在这种情况下您需要使用 item.buttonView.tooltipPosition = 'n'。所以除非你真的想使用 JS，否则我会选择一个简单的 CSS 解决方案。

如何更改 CKEditor 5 中按钮工具提示的默认位置

How to change the default position of button tooltips in CKEditor 5

tooltip

ckeditor5

CSS

JS