0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TinyMCEのツールバー固定位置を下方向に下げたい時

Last updated at Posted at 2020-06-18

スクロールしたときにツールバーを固定したい!

サイトの作りの都合で、ヘッダーナビゲーションが固定されている時、TinyMCEのツールバーがナビゲーションの下に隠れて固定される。
ムッ、ボタン押せない。イラッとしますね。
もう少し下で固定して欲しいのに。。。

そこで、イベントを捉えてCSSを設定するコードを入れましょ。
私の場合は、top:55と書いて、55px下に下げた。
結構これにたどり着くのは辛かった。
めちゃくちゃ調べた。
これでOKです。

initialize.js
    //TinyMCE4のバージョン
$(function(){
    //Stickytoolbar plugin initialized
    tinymce.PluginManager.add('stickytoolbar', function(editor, url) {
        editor.on('init', function() {
            setSticky();
        });
        $(window).on('scroll', function() {
            setSticky();
        });
        function setSticky() {
            var container = editor.editorContainer;
            var toolbars = $(container).find('.mce-toolbar-grp');
            var statusbar = $(container).find('.mce-statusbar');

            if (isSticky()) {
                $(container).css({
                    paddingTop: toolbars.outerHeight()
                });

                if (isAtBottom()) {
                    toolbars.css({
                        top: '0',
                        bottom: statusbar.outerHeight(),
                        position: 'absolute',
                        width: '100%',
                        borderBottom: 'none'
                    });
                } else {
                    toolbars.css({
                        top: 55,
                        bottom: 'auto',
                        position: 'fixed',
                        width: $(container).width(),
                        borderBottom: '1px solid rgba(0,0,0,0.2)'
                    });
                }
            } else {
                $(container).css({
                    paddingTop: 0
                });

                toolbars.css({
                    top: 'auto',
                    position: 'relative',
                    width: 'auto',
                    borderBottom: 'none'
                });
            }
        }
        function isSticky() {
            var container = editor.editorContainer,
                editorTop = container.getBoundingClientRect().top;

            if (editorTop < 0) {
                return true;
            }
            return false;
        }
        function isAtBottom() {
            var container = editor.editorContainer,
                editorTop = container.getBoundingClientRect().top;

            var toolbarHeight = $(container).find('.mce-toolbar-grp').outerHeight();
            var footerHeight = $(container).find('.mce-statusbar').outerHeight();

            var hiddenHeight = -($(container).outerHeight() - toolbarHeight - footerHeight);

            if (editorTop < hiddenHeight) {
                return true;
            }
            return false;
        }
    });
});

    //TinyMCE5のバージョン
    tinymce.PluginManager.add('stickytoolbar', function(editor, url) {
        editor.on('init', function() {
            setSticky();
        });
        $(window).on('scroll', function() {
            setSticky();
        });
        function setSticky() {
            var container = editor.editorContainer;
            var toolbars = $(container).find('.tox-editor-header');

            if ( $(container).hasClass("tox-tinymce--toolbar-sticky-on") ){
                toolbars.css({
                    top: 55,
                });
            } else {
                toolbars.css('top','');
            }
        }
    });
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?