* {
border: 0;
padding: 0;
margin: 0;
background: 50% 50% no-repeat;
text-decoration: none;
color: inherit;
box-sizing: border-box;
font-weight: 400
}
div.demo,
.inline > .mce-tinymce {
outline: 0!important;
border: 5px #f1f1f1 double!important;
display: block;
margin-bottom: 50px;
}
body.inline {
margin: 50px;
visibility: visible!important;
/* transition: opacity 100ms; */
}
:focus {
outline: 0
}
b,
b *,
strong,
strong * {
font-weight: 700
}
ol,
ul {
list-style: none
}
button,
input,
input:not([type]),
input[type=color],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input[type=button],
input[type=reset],
input[type=submit],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
pre,
select,
textarea {
font: inherit
}
.mce-container textarea {
display: initial!important
}
.mce-content-body {
font-family: Lato!important;
font-size: 14px;
color: #828282;
padding: 0 30px 30px!important
}
.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6 {
font-family: aileron;
font-weight: 200;
line-height: 1.4em;
margin: 25px 0 15px
}
.mce-content-body h1 {
font-size: 34px
}
.mce-content-body h2 {
font-size: 30px
}
.mce-content-body h3 {
font-size: 26px
}
.mce-content-body h4 {
font-size: 22px
}
.mce-content-body h5 {
font-size: 18px
}
.mce-content-body h6 {
font-size: 14px
}
.mce-content-body p {
margin: 25px 0
}
.mce-content-body ol,
.mce-content-body ul {
margin-left: 15px;
list-style-position: outside;
margin-bottom: 20px
}
.mce-content-body ol li,
.mce-content-body ul li {
margin-left: 10px;
margin-bottom: 10px;
color: #828282
}
.mce-content-body ul {
list-style-type: disc
}
.mce-content-body ol {
list-style-type: decimal
}
.mce-content-body a[href] {
text-decoration: underline
}
.mce-content-body table {
width: 100%;
border-spacing: 0;
border-collapse: separate;
border: 1px solid #aaa
}
.mce-content-body table tr:nth-child(even) {
background: #FAFAFA
}
.mce-content-body table caption,
.mce-content-body table td,
.mce-content-body table th {
padding: 15px 7px;
font: inherit
}
.mce-content-body table th {
font-weight: 400;
color: #6E6E6E;
background-position: 100% 100%;
background-size: 2px 10px;
background-repeat: no-repeat
}
.mce-content-body table th:last-child {
background: 0 0
}
<!DOCTYPE html>
<html>
<!-- //donShakespeare Awesome Dev Work Demos - 2016-->
<head>
<title>TinyMCE</title>
</head>
<body class="inline" style="visibility:hidden">
<div id="tinymceWrapperBubbleBar"></div>
<div class="demo">
<h1>INLINE MODE</h1>
<p><b>This is a thing of unprecedented TinyMCE marvel:</b> Select text via mouse or keyboard.</p>
<p>Hit 'return key' to reveal New Line toolbar ...</p>
</div>
<textarea class="demo">
<h1>IFRAME MODE</h1>
<p><b>This is a thing of unprecedented TinyMCE marvel:</b> Select text via mouse or keyboard.</p>
<p>Hit 'return key' to reveal New Line toolbar ...</p>
</textarea>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="tinymce@4.3.3" data-semver="4.3.3" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="tinymceBubbleBar.js"></script>
<script src="init.js"></script>
</body>
</html>
/*
tinymceBubbleBar.js
First of its kind native plugin for all modes of TinyMCE
https://github.com/donShakespeare/tinymceBubbleBar
Demo: http://www.leofec.com/modx-revolution/tinymce-floating-air-bubble-toolbar.html
(c) 2016 by donShakespeare for MODX Content and Editor Specialist
Deo Gratias!!
Usage:
tinymce.init({
selector: "#myEditor",
//inline: true, //or false
//fixed_toolbar_container: "#myOwnBarWrapperDiv", // for inline mode only
external_plugins: {
bubbleBar: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/tinymceBubbleBar.js", // plugin location
},
menubar: true, //or false - menubar and toolbar1 float together with any other unassigned toolbar#. In iframe mode, menubar is fixed.
toolbar1: "bold italic underline bubbleBarOptionsButton", //add optional button for sticky bar and other functionality
toolbar2: "image media codesample bubbleBarOptionsButton",
toolbar3: "code media codesample bubbleBarOptionsButton",
toolbar4: "...",
bubbleBarSettings: {
useCustomCSS: 0, // default 0 - use 1 to use your own stylesheet e.g via content_css
activateMultiBars: 1, //default is 1 (activate magical switching of bars)
barsForNewLine: 'toolbar2,toolbar3', // comma-separated list of toolbars - default is toolbar2 ... toolbar1 is reserved
magicInsert: { //bonus feature (CTRL + CLICK) to insert P tag in difficult/tight areas - after tagTriggers
activate: 1,
tagTriggers: "", // default 'h1, h2, h3, pre, p, p img, ol, ul, table, div, hr'
newLineHTML: "" // default is <p></p>
}
},
});
*/
function tinymceBubbleBarAllowMulti(editor){
if(editor.getParam("toolbar1") && editor.getParam("toolbar2") && editor.getParam("bubbleBarSettings",{}).activateMultiBars !== 0){
return true;
}
else{
return false;
}
}
function tinymceBubbleBarCSSInit(editor){
var tinymceBubbleBarCSS = ".mce-bubbleBar{position:absolute!important;z-index:999;visibility:hidden}.mce-bubbleBar.mce-tbActiveBar{visibility:visible;animation:tinyBubble-pop-upwards 180ms forwards linear}.mce-bubbleBar.mce-bubbleBarSticky{visibility:visible!important;opacity:1!important}.mce-tbActiveBar:after{left:50%;border-style:solid;content:'';height:0;width:0;position:absolute;pointer-events:none;border-color:transparent;border-width:10px;margin-left:-10px}.mce-tbActiveBar.bbBottomArrow:after,.mce-tbActiveBar.bbBottomArrowLeft:after{top:100%;border-top-color:inherit;content:' '}.mce-tbActiveBar.bbTopArrow:after{content:' ';border-bottom-color:inherit;bottom:100%}.mce-tbActiveBar.bbBottomArrowLeft:after{left:15px}@keyframes tinyBubble-pop-upwards{0%{opacity:0;transform:matrix(.97,0,0,1,0,12)}20%{opacity:.7;transform:matrix(.99,0,0,1,0,2)}40%{opacity:1;transform:matrix(1,0,0,1,0,-1)}100%{transform:matrix(1,0,0,1,0,0)}}.mce-bubbleBar>div.mce-container{border-width:0!important;padding-bottom:1px}.mce-bubbleBar>div.mce-container :not(.mce-toolbar){width:inherit!important;height:inherit!important;overflow:hidden}.mce-bubbleBar .mce-menubar{width:auto!important}";
if(!$("#tinymceBubbleBarCSS").length && !editor.getParam("bubbleBarSettings",{}).useCustomCSS){
$("head").append('<style id="tinymceBubbleBarCSS">'+tinymceBubbleBarCSS+'</style>');
}
if(!editor.inline){
if(!$(editor.getBody()).parents("html").find("head #tinymceBubbleBarCSS").length && tinymceBubbleBarCSS !==""){
$(editor.getBody()).parents("html").find("head").append('<style id="tinymceBubbleBarCSS">'+tinymceBubbleBarCSS+'</style>');
}
}
}
function tinymceBubbleBarPosition(editor, pageY) {
var range = editor.selection.getRng(true),
edges = range.getBoundingClientRect(),
middleEdges = (edges.left + edges.right) / 2,
windowWidth = $(window).innerWidth(),
windowHeight = $(window).height(),
scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
extraPadding = 15,
returnKeyBar = editor.getParam("bubbleBarSettings",{}).barsForNewLine ? editor.getParam("bubbleBarSettings",{}).barsForNewLine : "toolbar2",
primaryBar = "toolbar1", // always so for toolbar1
showFileMenuBar = 1,
showBar = primaryBar,
hideBar = returnKeyBar,
origin = "normal",
bar = $(editor.getParam("fixed_toolbar_container"));
// add as many toolbar swaps for as many date-mce-selected elements ..e,g IMG, PRE, etc etc
if (range.getBoundingClientRect().top === 0 && range.getBoundingClientRect().width === 0) {
//make a swap for return key bar
showBar = returnKeyBar,
hideBar = primaryBar,
showFileMenuBar = 0,
origin = "returnKey";
}
if (!editor.inline) {
bar = $(editor.getContainer()).find(".mce-toolbar-grp");
}
// first declaration
var barHeight = bar.outerHeight(),
barWidth = bar.outerWidth(),
middleBar = barWidth / 2,
leftExtremist = 0,
menuBarWidth = 0,
menuBarHeight = 0,
leftAnchor = leftExtremist - middleBar;
if(tinymceBubbleBarAllowMulti(editor)){
// if(showFileMenuBar && bar.find(".mce-menubar[role=menubar]").length){
var menubar = bar.find(".mce-tinymce-inline:visible .mce-menubar[role=menubar]");
var menuGroup = bar.find(".mce-tinymce-inline:visible .mce-toolbar-grp");
if(menubar.length){
if(showFileMenuBar && editor.inline){
menuGroup.css("top", menubar.outerHeight());
menuBarWidth = menubar.outerWidth(true);
menuBarHeight = menubar.outerHeight(true);
}
else{
menubar.addClass('bubbleHide');
menuGroup.css("top", function(i,current) {
if(parseInt(current) == parseInt(menubar.outerHeight())){
return parseInt(current) - parseInt(menubar.outerHeight());
}
});
}
}
var hideIndex = hideBar.split(",");
$.each(hideIndex, function( index, value ) {
var set = "hide";
var ind = value.slice(-1) - 1;
// bar.find(".mce-tinymce-inline:visible .mce-toolbar[role=toolbar]:eq("+ind+")").addClass('bubbleHide');
bar.find(".mce-container-body:visible .mce-toolbar[role=toolbar]:eq("+ind+")").attr("bb-set", set).attr("bb-id", ind);
});
var showIndex = showBar.split(",");
$.each(showIndex, function( index, value ) {
var set = "show";
var ind = value.slice(-1) - 1;
bar.find(".mce-container-body:visible .mce-toolbar[role=toolbar]:eq("+ind+")").attr("bb-set", set).attr("bb-id", ind);
});
if(origin == "normal"){
bar.find(".mce-container-body:visible .mce-toolbar[role=toolbar]:not([bb-id])").attr("bb-set","show");
}
else{
bar.find(".mce-container-body:visible .mce-toolbar[role=toolbar]:not([bb-id])").removeAttr("bb-set");
}
bar.find(".mce-container-body:visible .mce-toolbar[role=toolbar]").hide();
$("[bb-set=show]").show();
//add padding buffer
var totalWidth, width, height = menuBarHeight;
// var width = 5;
// bar.find(".bubbleShow:eq(0)").find(".mce-btn").each(function(){
// width +=parseInt($(this).outerWidth(true));
// });
if(editor.inline){
totalWidth = Math.max.apply(null, $("[bb-set=show]").css("display","inline-block").map(function () {
return $(this).outerWidth(true);
}).get());
$("[bb-set=show]").css("display","block");
}
else{
totalWidth = Math.max.apply(null, $("[bb-set=show] .mce-btn-group").parent().map(function () {
return $(this).outerWidth(true);
}).get());
}
if(menuBarWidth > totalWidth){
width = menuBarWidth;
}
else{
width = totalWidth;
}
bar.find("[bb-set=show]").each(function(){
height +=parseInt($(this).outerHeight(true));
});
if(editor.inline){
bar.children(".mce-tinymce-inline:visible").css({
"width": width, "height": height
});
}
else{
bar.find("[bb-set=show]").parent().css({
"width": width + 2, "height": height - 3, "overflow": "hidden"
});
}
//must be reassigned
barHeight = bar.outerHeight(),
barWidth = bar.outerWidth(),
middleBar = barWidth / 2,
leftExtremist = 0,
leftAnchor = leftExtremist - middleBar;
// bar.find(".bubbleHide").hide().removeClass('bubbleHide');
// bar.find(".bubbleShow").removeClass('bubbleShow');
}
bar.removeClass('bbTopArrow bbBottomArrowLeft').addClass('bbBottomArrow');
//deal with TinyMCE inline mode - simple element on same page
var top, left;
if (editor.inline) {
top = edges.top + window.pageYOffset - barHeight - extraPadding;
if (edges.top < bar.height()) {
// trap bubbleBar below viewport always
// var top = edges.top + window.pageYOffset + barHeight;
top = edges.top + edges.height + window.pageYOffset + extraPadding;
bar.removeClass('bbBottomArrow bbBottomArrowLeft').addClass('bbTopArrow');
}
}
//deal with TinyMCE iframe mode - not so simple - stuff changes when iframe has scrollbar
else {
top = edges.top - barHeight - extraPadding;
if (edges.top < scrollTop || top < scrollTop) {
// trap bubbleBar below viewport always
top = edges.bottom + extraPadding;
bar.removeClass('bbBottomArrow bbBottomArrowLeft').addClass('bbTopArrow');
}
}
// set left variable
if (middleEdges < middleBar) {
left = leftAnchor + middleBar;
// bar.removeClass('bbBottomArrow bbTopArrow bbBottomArrowLeft');
bar.removeClass('bbBottomArrowLeft');
}
//if bar is falling off the right viewport margin
else if ((windowWidth - middleEdges) < middleBar) {
left = windowWidth + leftAnchor - middleBar - extraPadding;
// bar.removeClass('bbBottomArrow bbTopArrow bbBottomArrowLeft');
bar.removeClass('bbBottomArrowLeft');
}
else {
// var left = leftAnchor + middleEdges + extraPadding;
left = leftAnchor + middleEdges;
bar.removeClass('bbBottomArrowLeft');
}
// ROADMAP -- add as many toolbars for different elements
//get return key and all those other empty up and down arrow stuff (try mouseup later)
if (tinymceBubbleBarAllowMulti(editor) && range.getBoundingClientRect().top === 0 && range.getBoundingClientRect().width === 0) {
var emptyNode = $(editor.selection.getNode());
// var top = pageY - barHeight; //a not so useless consideration
top = emptyNode.offset().top - barHeight - extraPadding;
left = emptyNode.offset().left;
bar.removeClass('bbBottomArrow bbTopArrow').addClass('bbBottomArrowLeft');
}
//apply final coordinates to bar --phew!!!
if(bar.find("[bb-set=show]:visible").length){
var panelBg = $(".mce-panel").css("background-color");
bar.css({"top": top, "left": left}).addClass("mce-tbActiveBar").css({"background-color":panelBg, "border-color": panelBg});
}
else{
bar.removeClass('mce-tbActiveBar');
}
}
function tinymceBubbleBarIgnite(editor, addClass, eventWhich, pageY) {
if(addClass){
tinymceBubbleBarNewLineTrigger(editor);
var thisEd;
if (editor.inline) {
thisEd = $(editor.getParam("fixed_toolbar_container"));
}
else {
thisEd = $(editor.getContainer()).find(".mce-toolbar-grp");
}
if (addClass == 'addClass') {
thisEd.addClass("mce-bubbleBar");
}
if (addClass == 'addClassSticky') {
if (thisEd.hasClass("mce-bubbleBarSticky")){
thisEd.removeClass("mce-bubbleBarSticky");
}
else{
thisEd.addClass("mce-bubbleBarSticky");
}
}
}
else{
setTimeout(function() {
var range = editor.selection.getRng(true);
var rangey = "" + range + "";
// change this wicked logic to single function checkValidity
if (rangey.trim() !== '' || (range.getBoundingClientRect().top === 0 && tinymceBubbleBarAllowMulti(editor) && (eventWhich == 1 || eventWhich == 38 || eventWhich == 40 || eventWhich == 13))) {
tinymceBubbleBarPosition(editor, pageY);
}
else {
$('.mce-bubbleBar').removeClass('mce-tbActiveBar bbBottomArrow bbTopArrow bbBottomArrowLeft');
}
}, 100);
}
}
function tinymceBubbleBarWordCount(editor) {
var countre = editor.getParam('wordcount_countregex', /[\w\u2019\x27\-\u00C0-\u1FFF]+/g),
cleanre = editor.getParam('wordcount_cleanregex', /[0-9.(),;:!?%#$?\x27\x22_+=\\\/\-]*/g),
thisBody = editor.getContent({format: 'raw'}),
selCount = editor.selection.getContent(),
words = 0,
xters = 0,
selW = 0,
selC = 0;
if (thisBody) {
if(selCount){
if(selCount !== '') {
selC = selCount.length;
sel = selCount.replace(/\.\.\./g, ' ').replace(/<.[^<>]*?>/g, ' ').replace(/ | /gi, ' ').replace(/(\w+)(&#?[a-z0-9]+;)+(\w+)/i, "$1$3").replace(/&.+?;/g, ' ').replace(cleanre, '');
selArray = sel.match(countre);
if (selArray) {
selW = selArray.length;
}
}
}
var tx = thisBody.replace(/\.\.\./g, ' ').replace(/<.[^<>]*?>/g, ' ').replace(/ | /gi, ' ').replace(/(\w+)(&#?[a-z0-9]+;)+(\w+)/i, "$1$3").replace(/&.+?;/g, ' ').replace(cleanre, '');
var wordArray = tx.match(countre);
var xtersArray = $(editor.getBody()).text().length;
if (wordArray) {
words = wordArray.length;
}
if (xtersArray) {
xters = xtersArray;
}
}
$(".mce-npSelCount span.mce-text").text("Selected Words: " + selW + ", Characters: " + selC);
$(".mce-npCount span.mce-text").text("Word Count: " + words);
$(".mce-npCSCount span.mce-text").text("Characters (+spaces): " + xters);
// $(".mce-npCCount span.mce-text").text("Character, no Spaces: " + $(editor.getBody()).text().trim().length);
$(".mce-npPCount span.mce-text").text("Paragraphs: " + $(editor.getBody()).find("p").length);
}
function tinymceBubbleBarNewLineTrigger(editor){
var nlTB = editor.getParam("bubbleBarSettings",{}).magicInsert || [];
if(nlTB.activate){
var tagTriggers = editor.getParam("bubbleBarSettings",{}).magicInsert.tagTriggers || 'h1, h2, h3, pre, p, p img, ol, ul, table, div, hr';
$(editor.getBody()).on('click', tagTriggers, function (e) {
if(nlTB.activate && (e.metaKey || e.ctrlKey)){
var el = e.target;
var thisEl = $(this);
$(el).after('<p id=_magicMtemp><br data-mce-bogus=1 /></p>');
editor.selection.select(editor.$('#_magicMtemp')[0]);
editor.$('#_magicMtemp').removeAttr('id');
setTimeout(function(){
editor.focus();
},100);
// editor.insertContent("<p></p>");
}
});
// editor.selection.setCursorLocation(editor.$('#magicMedium').prev(), 0);
// if ($.inArray($("#__newP")[0].nodeName.toLowerCase(), voidElements) == -1 ) {
// https://www.tinymce.com/docs/advanced/editor-command-identifiers/
}
}
tinymce.PluginManager.add('bubbleBar', function(editor) {
editor.addCommand('tinymceBubbleBar', function(){});
editor.on("init", function() {
tinymceBubbleBarCSSInit(editor);
tinymceBubbleBarIgnite(editor, "addClass");
editor.settings.tinymceBubbleBar = true;
});
editor.on('keyup mouseup', function(event) {
// if mouse mousesup outside the boundary of editor, nothing happens - and rigtly so!!!
tinymceBubbleBarIgnite(editor, "", event.which, event.pageY);
});
editor.on('blur', function() {
$('.mce-bubbleBar').removeClass('mce-tbActiveBar');
});
editor.on('focus mouseup keyup change', function() {
tinymceBubbleBarWordCount(editor);
});
editor.on('DblClick', function(e) {
if (e.target.nodeName == 'IMG') {
editor.execCommand('mceImage', true);
}
if (e.target.nodeName == 'A') {
editor.execCommand('mceLink', true);
}
});
editor.addButton('bubbleBarOptionsButton', {
type: "menubutton",
text: "...",
// icon: "fullpage",
classes: editor.id+ " bubbleBarOptionsButton",
tooltip: 'tinymceBubbleBar options',
autohide: false,
onclick:function(){
setTimeout(function(){
tinymceBubbleBarWordCount(editor);
},200);
},
menu:[
{
text: "Toggle Sticky",
onclick: function(){
tinymceBubbleBarIgnite(editor, "addClassSticky");
}
},
{
text: "Word Count: 000000",
classes: "npCount",
menu:[
{
classes: "npCSCount",
text: "Characters (+spaces): 0000000",
onPostRender: function(){
setTimeout(function(){
tinymceBubbleBarWordCount(editor);
},200);
}
},
{
classes: "npPCount",
text: "Paragraphs: 000000 "
},
{
classes: "npSelCount",
text: "Selected Words: 000, Characters: 0000"
}
]
}
]
});
});
//plugin https://github.com/donShakespeare/tinymceBubbleBar v2
//TinyMCE sample init
function init(selector, inline) {
tinymce.init({
toolbar1: 'bold italic link | unlink bullist | numlist blockquote codesample | bubbleBarOptionsButton',
toolbar2: 'image media | codesample blockquote | bubbleBarOptionsButton',
toolbar3: 'media | codesample blockquote | bubbleBarOptionsButton',
bubbleBarSettings: {
useCustomCSS: 1,
activateMultiBars: 1,
barsForNewLine: 'toolbar2',
},
contextmenu: "code undo redo codesample removeformat",
menubar: false,
content_css: "demo.css, tinymceBubbleBar.css",
content_style: ".mce-widget.mce-tooltip {display: none !important;}",
selector: "#" + selector,
inline: inline,
fixed_toolbar_container: "#tinymceWrapperBubbleBar",
plugins: [
'bubbleBar noneditable codesample',
'autoresize advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools media'
],
valid_elements: "+*"
});
}
$(document).ready(function() {
$("body > .demo").each(function(index, el) {
var inline, nn = this.nodeName.toLowerCase();
// var cl = "." + $(this).attr("class").split(" ").join(".");
if (nn === "textarea") {
inline = false;
} else {
inline = true;
}
this.id = tinymce.DOM.uniqueId();
init(this.id, inline);
});
});
.mce-bubbleBar {
position: absolute!important;
z-index: 999;
visibility: hidden;
}
.mce-bubbleBar.mce-tbActiveBar {
padding: 1px;
visibility: visible;
animation: tinyBubble-pop-upwards 180ms forwards linear;
border-radius: 0px;
border-width: 2px!important;
border-style: solid;
}
.mce-bubbleBar.mce-bubbleBarSticky {
visibility: visible!important;
opacity: 1!important
}
.mce-tbActiveBar:after {
left: 50%;
border-style: solid;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-width: 10px;
margin-left: -10px
}
.mce-tbActiveBar.bbBottomArrow:after,
.mce-tbActiveBar.bbBottomArrowLeft:after {
top: 100%;
border-top-color: inherit;
content: ' '
}
.mce-tbActiveBar.bbTopArrow:after {
content: ' ';
border-bottom-color: inherit;
bottom: 100%
}
.mce-tbActiveBar.bbBottomArrowLeft:after {
left: 15px
}
@keyframes tinyBubble-pop-upwards {
0% {
opacity: 0;
transform: matrix(.97, 0, 0, 1, 0, 12)
}
20% {
opacity: .7;
transform: matrix(.99, 0, 0, 1, 0, 2)
}
40% {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, -1)
}
100% {
transform: matrix(1, 0, 0, 1, 0, 0)
}
}
.mce-bubbleBar .mce-container {
margin: 0!important;
padding: 0px;
}
.mce-bubbleBar>.mce-container {
border-width: 0!important;
padding-bottom: 1px;
}
.mce-bubbleBar .mce-container:last-of-type {
padding-bottom: 0px!important;
}
.mce-bubbleBar .mce-container div:not(.mce-toolbar) {
width: inherit!important;
height: inherit!important;
overflow: hidden;
}
.mce-bubbleBar .mce-toolbar {
padding-bottom: 1px!important;
}
.mce-bubbleBar .mce-btn {
border: 0;
}
.mce-bubbleBar .mce-menubar {
width: auto!important
}