JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/9b5e646591ad0eecda388878bec13155.css?yakabox-vne-5.27.9-1">
<script src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<link rel="stylesheet" href="https://tinymce.cachefly.net/4.2/skins/lightgray/skin.min.css">
<link rel="stylesheet" href="https://tinymce.cachefly.net/4.2/skins/lightgray/content.inline.min.css">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/activityViewer"><img src="https://yakabod.yakabox.com/images/yakaboxHeaderLogo.png" class="img-responsive"> <span class="bold text-white">Yakabod</span></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">

            <form id="quickSearchForm" name="SearchForm" action="/search/" method="POST">
              <input id="SearchData_BaseSearchRequirements" name="SearchData[BaseSearchRequirements]" value="" type="hidden">
              <input...

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);


div.ui-proto-comment {
  height:35px;
  width: 100%;
	background-color:rgba(255,255,255,.6)
}
div.ui-proto-comment:after {
  content: "Add A Comment";
  position: absolute;
  top: 7px;
  left:10px;
  color:#757575;
  
}



body {
  padding-top:100px;
}

.ui-proto-comment.mce-content-body.mce-edit-focus {
	height:350px;
  width: 100%;
  border:1px solid rgba(192,192,192,1) ;
	background-color:rgba(255,255,255,1);
  transition: all ease-in 2ms;
	
}

div.mce-edit-focus:after {
  content: "";
  
}


.mce-panel.mce-floatpanel {
	width:726px !important;
	font-family: 'Open Sans';
	font-size:12px;
}
.mce-menubar .mce-menubtn button {
	font-size:11px;
}
.ui-yakabox-comment-wrapper {
  
  background-color:#fff;
  border-radius:10px;
  padding-left:15px;
    border: 1px solid #ccc;

}
.ui-yakabox-comment-wrapper.ui-expanded {
  
  background-color: transparent;
  border-radius:10px;
  padding-left:15px;
    border: 1px solid transparent;

}

.ui-yakabox-comment-wrapper.ui-expanded {
  
  background-color: transparent;
  border-radius:10px;

   img {
    height:auto;
  }
}


.ui-yakabox-comment-wrapper img {
  
  height:25px;
  margin-top:5px
}

.col-xs-1.text-right {
	width: 55px;
}

JavaScript

tinymce.init({
  selector: ".ui-proto-comment",
  statusbar: false,
  inline: true,
  init_instance_callback: function (editor) {
    editor.on('focus', function (e) {
      $('.ui-yakabox-comment-wrapper').addClass('ui-expanded');
    });
     editor.on('blur', function (e) {
      $('.ui-yakabox-comment-wrapper').removeClass('ui-expanded');
    });
 }
    
});