lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-10-26 20:16:15 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fixing that with multiple TinyMCE editors on a page multiple toolbars also appeared, see #7022

Browse Source
This commit is contained in:
Lombiq
2016-07-12 18:08:02 +02:00
committed by Zoltán Lehóczky
parent e04b12d177
commit a5b1aa5d2a
6 changed files with 74 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css
View File

@@ -2,11 +2,9 @@
top: 0;
position: fixed;
background-color: white;
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}
#stickyContainer.container-layout {
width: 100%;
}
#stickyContainer.sticky-container-layout {
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}

6
src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.less
View File

@@ -2,11 +2,9 @@
top: 0;
position: fixed;
background-color: white;
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}
#stickyContainer.container-layout {
width: 100%;
}
#stickyContainer.sticky-container-layout {
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}

2
src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.min.css vendored
View File

@@ -1 +1 @@
#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff;}#stickyContainer.container-layout{width:100%;}#stickyContainer.sticky-container-layout{border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e;}
#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff;border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e;}#stickyContainer.container-layout{width:100%;}

106
src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js
View File

@@ -34,51 +34,75 @@ tinyMCE.init({
$(document).bind("localization.ui.directionalitychanged", function(event, directionality) {
editor.getBody().dir = directionality;
});
// If the focused editable area is taller than the window, make the menu and the toolbox sticky-positioned within the editor
// to help the user avoid excessive vertical scrolling.
// There is a built-in fixed_toolbar_container option in the TinyMCE, but we can't use it, because it is only
// available if the selector is a DIV with inline mode.
editor.on('focus', function () {
var $contentArea = $(this.contentAreaContainer.parentElement);
stickyToolbar($contentArea);
});
editor.on('blur', function () {
var $contentArea = $(this.contentAreaContainer.parentElement);
var isAdded = false;
$contentArea.prepend($contentArea.find("div.mce-toolbar-grp"));
$contentArea.prepend($contentArea.find("div.mce-menubar"));
$("#stickyContainer").remove();
$("#stickyPlaceholder").remove();
});
function stickyToolbar($contentArea) {
var $container = $("<div/>", { id: "stickyContainer", class: "container-layout" });
$contentArea.prepend($container);
$container.append($contentArea.find("div.mce-menubar"));
$container.append($contentArea.find("div.mce-toolbar-grp"));
var $containerPosition = $container.offset();
var $placeholder = $("<div/>", { id: "stickyPlaceholder" });
var isAdded = false;
if ($(window).scrollTop() >= $containerPosition.top && !isAdded) {
$container.addClass("sticky-top");
$placeholder.insertBefore($container);
$container.width($placeholder.width());
$placeholder.height($container.height());
}
$(window).scroll(function (event) {
var $statusbarPosition = $contentArea.find("div.mce-statusbar").offset();
if ($(window).scrollTop() >= $containerPosition.top && !isAdded) {
$container.addClass("sticky-top");
$placeholder.insertBefore($container);
$container.width($placeholder.width());
$placeholder.height($container.height());
$(window).on("resize", function () {
$container.width($placeholder.width());
$placeholder.height($container.height());
});
isAdded = true;
} else if ($(window).scrollTop() < $containerPosition.top && isAdded) {
$container.removeClass("sticky-top");
$placeholder.remove();
$(window).on("resize", function () {
$container.width("100%");
});
isAdded = false;
}
if ($(window).scrollTop() >= ($statusbarPosition.top - $container.height())) {
$container.hide();
} else if ($(window).scrollTop() < ($statusbarPosition.top - $container.height()) && isAdded) {
$container.show();
}
});
}
}
});
// If the editable area is taller than the window, make the menu and the toolbox sticky-positioned within the editor
// to help the user avoid excessive vertical scrolling.
// There is a built-in fixed_toolbar_container option in the TinyMCE, but we can't use it, because it is only
// available if the selector is a DIV with inline mode.
$(window).load(function () {
var $container = $("<div/>", { id: "stickyContainer", class: "container-layout" });
$(".mce-stack-layout:first").prepend($container);
$container.append($(".mce-menubar"));
$container.append($(".mce-toolbar-grp"));
var containerPosition = $container.get(0).getBoundingClientRect();
var $placeholder = $("<div/>");
var isAdded = false;
$(window).scroll(function (event) {
var $statusbarPosition = $(".mce-statusbar").offset();
if ($(window).scrollTop() >= containerPosition.top && !isAdded) {
$container.addClass("sticky-top");
$placeholder.insertBefore($container);
$container.width($placeholder.width());
$placeholder.height($container.height());
$(window).on("resize", function () {
$container.width($placeholder.width());
$placeholder.height($container.height());
});
$container.addClass("sticky-container-layout");
isAdded = true;
} else if ($(window).scrollTop() < containerPosition.top && isAdded) {
$container.removeClass("sticky-top");
$placeholder.remove();
$container.removeClass("sticky-container-layout");
$(window).on("resize", function () {
$container.width("100%");
});
isAdded = false;
}
if ($(window).scrollTop() >= ($statusbarPosition.top - $container.height())) {
$container.hide();
} else if ($(window).scrollTop() < ($statusbarPosition.top - $container.height()) && isAdded) {
$container.show();
}
});
});

8
src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css
View File

@@ -7,13 +7,11 @@
top: 0;
position: fixed;
background-color: white;
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}
#stickyContainer.container-layout {
width: 100%;
}
#stickyContainer.sticky-container-layout {
border-top: 1px solid #9e9e9e;
border-bottom: 1px solid #9e9e9e;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9yY2hhcmQtdGlueW1jZS5jc3MiLCJvcmNoYXJkLXRpbnltY2UubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsQUNMQTtFQUNFLE9BQUE7RUFDQSxnQkFBQTtFQUNBLHdCQUFBO0NEQ0Q7QUNDRDtFQUNFLFlBQUE7Q0RDRDtBQ0NEO0VBQ0UsOEJBQUE7RUFDQSxpQ0FBQTtDRENEIiwiZmlsZSI6Im9yY2hhcmQtdGlueW1jZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIjc3RpY2t5Q29udGFpbmVyLnN0aWNreS10b3Age1xuICB0b3A6IDA7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG59XG4jc3RpY2t5Q29udGFpbmVyLmNvbnRhaW5lci1sYXlvdXQge1xuICB3aWR0aDogMTAwJTtcbn1cbiNzdGlja3lDb250YWluZXIuc3RpY2t5LWNvbnRhaW5lci1sYXlvdXQge1xuICBib3JkZXItdG9wOiAxcHggc29saWQgIzllOWU5ZTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM5ZTllOWU7XG59XG4iLCLvu78jc3RpY2t5Q29udGFpbmVyLnN0aWNreS10b3Age1xyXG4gIHRvcDogMDtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XHJcbn1cclxuI3N0aWNreUNvbnRhaW5lci5jb250YWluZXItbGF5b3V0IHtcclxuICB3aWR0aDogMTAwJTtcclxufVxyXG4jc3RpY2t5Q29udGFpbmVyLnN0aWNreS1jb250YWluZXItbGF5b3V0IHtcclxuICBib3JkZXItdG9wOiAxcHggc29saWQgIzllOWU5ZTtcclxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgIzllOWU5ZTtcclxufSJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ== */
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9yY2hhcmQtdGlueW1jZS5jc3MiLCJvcmNoYXJkLXRpbnltY2UubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsQUNMQTtFQUNFLE9BQUE7RUFDQSxnQkFBQTtFQUNBLHdCQUFBO0VBQ0EsOEJBQUE7RUFDQSxpQ0FBQTtDRENEO0FDQ0Q7RUFDRSxZQUFBO0NEQ0QiLCJmaWxlIjoib3JjaGFyZC10aW55bWNlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiNzdGlja3lDb250YWluZXIuc3RpY2t5LXRvcCB7XG4gIHRvcDogMDtcbiAgcG9zaXRpb246IGZpeGVkO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICM5ZTllOWU7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjOWU5ZTllO1xufVxuI3N0aWNreUNvbnRhaW5lci5jb250YWluZXItbGF5b3V0IHtcbiAgd2lkdGg6IDEwMCU7XG59XG4iLCLvu78jc3RpY2t5Q29udGFpbmVyLnN0aWNreS10b3Age1xyXG4gIHRvcDogMDtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XHJcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICM5ZTllOWU7XHJcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM5ZTllOWU7XHJcbn1cclxuI3N0aWNreUNvbnRhaW5lci5jb250YWluZXItbGF5b3V0IHtcclxuICB3aWR0aDogMTAwJTtcclxufVxyXG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */

2
src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css vendored
View File

@@ -1 +1 @@
#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff}#stickyContainer.container-layout{width:100%}#stickyContainer.sticky-container-layout{border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e}
#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff;border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e}#stickyContainer.container-layout{width:100%}