Appearance

Correction de la barre d'outil collante ​

Description ​

Ce plugin corrige le comportement instable de la barre d'outils de l'éditeur de texte enrichi (RTE) TinyMCE dans la version 13 d'Umbraco.

Références ​

Code ​

javascript
// https://gist.github.com/mcl-sz/87529b4914c601ac8b61a726fe6ce803
// https://github.com/umbraco/Umbraco-CMS/issues/14911
tinymce.PluginManager.add("stickytoolbar", function (editor, url) {
  var scrollingElement = editor.getElement().closest('[data-element="editor-container"]');

  if (scrollingElement) {
    scrollingElement.addEventListener("scroll", setSticky);
  }

  editor.on("init", function () {
    setSticky();
  });

  function setSticky() {

    if (editor.editorContainer) {

      var scrollingElementTop = scrollingElement.getBoundingClientRect().top,
        container = editor.editorContainer,
        containerHeight = container.offsetHeight,
        containterStyles = window.getComputedStyle(container),
        containerWidth = container.getBoundingClientRect().width - (parseFloat(containterStyles.borderRightWidth) + parseFloat(containterStyles.borderLeftWidth)),
        containerTop = container.getBoundingClientRect().top,
        toolbar = container.querySelector(".tox-editor-header"),
        toolbarHeight = toolbar.offsetHeight,
        statusbar = container.querySelector(".tox-statusbar"),
        statusbarHeight = statusbar?.offsetHeight ?? 0,
        proximityToTopOfScrollingElement = containerTop - scrollingElementTop,
        hiddenHeight = -(containerHeight - toolbarHeight - statusbarHeight),
        isSticky = proximityToTopOfScrollingElement < 0,
        isAtBottom = proximityToTopOfScrollingElement < hiddenHeight;

      if (isSticky) {
        container.style.paddingTop = toolbarHeight;

        if (isAtBottom) {

          toolbar.style.position = "absolute";
          toolbar.style.top = "auto";
          toolbar.style.bottom = `${statusbarHeight}px`;
          toolbar.style.width = `${containerWidth}px`;

        } else {

          toolbar.style.position = "fixed";
          toolbar.style.top = `${scrollingElementTop}px`;
          toolbar.style.bottom = "auto";
          toolbar.style.width = `${containerWidth}px`;
          toolbar.style.zIndex = 500;

        }

      } else {

        container.style.paddingTop = 0;
        toolbar.style.position = "relative";
        toolbar.style.top = "auto";
        toolbar.style.width = "auto";
      }
    }

  }
});

Installation ​

  1. Enregistrez le code sous plugin.js dans /App_Plugins/Backoffice/tinymce/plugins/stickytoolbar/

  2. Ajouter la configuration suivante au fichier appsettings.json du projet dans la section TinyMCE :

javascript
"external_plugins": "{\"stickytoolbar\":\"/App_Plugins/Backoffice/tinymce/plugins/stickytoolbar/plugin.js\"}"

Contributors

The avatar of contributor named as Clément Favre Clément Favre

Changelog