Tinymce编辑器工具栏吸顶插件，支持设置顶部预留位置，及focus显示blur隐藏

插件说明

因为项目需求，自带的吸顶功能会遮挡住头部的导航，翻遍了所有文档没找到设置避免冲突的配置

所以自己写了一个，然后发现ckeditor5的编辑器吸顶是focus才显示，blur会自动关闭，所以顺便也加上了这个功能

参数说明

配置名	默认状态	配置说明
cfyun_toolbar_sticky	默认不开启	插件开关
toolbar_sticky_type	启用	是否开启focus和blur自动显示或者关闭功能, 默认启用
toolbar_sticky_elem	默认空	预留位置的elem如果需要动态获取高度, 请设置
toolbar_sticky_elem_height	默认0	顶部预留位置高度，如果对页面变化要求不高，请用此设置
toolbar_sticky_wrap	默认window	编辑器所在滚动容器

安装说明

将下面的代码保存为plugin.min.js

tinymce/plugins/目录新建toolbarsticky放在里面就可以了

然后在编辑器配置的plugins项新增toolbarsticky

其他配置请看参数说明，功能很简单

(function () {
    'use strict';

    let global = tinymce.util.Tools.resolve('tinymce.PluginManager');

    let Global = typeof window !== 'undefined' ? window : Function('return this;')();

    let offset = {};
    let runtime = {};
    
    let toolbar_sticky_type = !0;
    let cfyun_toolbar_sticky = !1;
    let toolbar_sticky_elem = null;
    let toolbar_sticky_elem_height = 0;
    let toolbar_sticky_wrap = null;

    class ToolbarSticky {
        constructor(editor) {

            cfyun_toolbar_sticky = editor.getParam('cfyun_toolbar_sticky', !1, 'bool');

            if (!cfyun_toolbar_sticky) {
                return;
            }

            toolbar_sticky_type = editor.getParam('toolbar_sticky_type', !0, 'bool');
            toolbar_sticky_elem = editor.getParam('toolbar_sticky_elem', '', 'string');
            toolbar_sticky_elem_height = editor.getParam('toolbar_sticky_elem_height', 0, 'number');
            toolbar_sticky_wrap = editor.getParam('toolbar_sticky_wrap', '', 'string');

            this.editor = editor;
            runtime.wrap = toolbar_sticky_wrap || window;
            runtime.editor = editor.$(editor.container);
            runtime.header = runtime.editor.find('.tox-editor-header');
            runtime.container = runtime.editor.find('.tox-editor-container');

            runtime.eHeight = toolbar_sticky_elem_height;

            let _this = this;

            if(toolbar_sticky_type) {
                editor.on('focus', function () {
                    _this.event();
                });
    
                editor.on('blur', function () {
                    _this.restore();
                    _this.unBind();
                });
            } else {
                this.event(); 
            }

            return this;
        }
        sticky() {
            this.position();
            if (offset.scrollTop > offset.top - runtime.header[0].clientHeight) {
                runtime.container.css('padding-top', runtime.header[0].clientHeight);
                runtime.editor.removeClass('tox-tinymce--toolbar-sticky-off').addClass('tox-tinymce--toolbar-sticky-on');
                runtime.header.css({
                    position: 'fixed',
                    width: offset.width,
                    left: offset.left,
                    top: runtime.eHeight || 0,
                    borderTop: '1px solid #ccc'
                });
                return !1;
            }

            this.restore();
        }
        position() {
            if (toolbar_sticky_elem) {
                runtime.eHeight = document.querySelector(toolbar_sticky_elem).clientHeight;
            }
            offset.scrollTop = this.scrollTop();
            offset.width = this.editor.container.clientWidth;
            offset.left = runtime.editor.offset().left + 1;
            offset.top = this.editor.$(runtime.container).offset().top + 10;
        }
        event() {
            let _this = this;

            $(runtime.wrap).off('resize.tinymceSticky scroll.tinymceSticky').on('resize.tinymceSticky scroll.tinymceSticky', function () {
                _this.sticky();
            });

            this.sticky();
        }
        unBind() {
            $(runtime.wrap).off('resize.tinymceSticky scroll.tinymceSticky');
        }
        restore() {
            runtime.header.attr('style', '');
            runtime.container.css('padding-top', 0);
            runtime.editor.removeClass('tox-tinymce--toolbar-sticky-on').addClass('tox-tinymce--toolbar-sticky-off');
        }
        destroy() {
            offset = runtime = {};
            this.unBind();
            this.restore();
        }
        scrollTop() {
            return document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
        }
    }
    
    function Plugin () {
        global.add('toolbarsticky', function (editor) {
            editor.on('init', function (e) {
                new ToolbarSticky(editor);
            });
        });
    }
  
    Plugin();

}());

 

来源：oschina

链接：https://my.oschina.net/quc/blog/4914732