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类。默认情况下，所有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是MVC（VM）结构。可以使用JS和Button#tooltipPosition属性（'s'或'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中更改按钮工具提示的默认位置

1 个答案:

CSS

JS