test tinymce inline

test tinymce

by chrischilcoat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <div id="ybx-broadcast" style="border: medium none;" class="ui-dialog-content ui-widget-content"></div>
  <div id="ybx-panel" style="display: none;" class="ui-yakabox-panel ui-bootstrap">
    <div class="ui-yakabox-panel-trigger"><a class="ybx-panel-trigger btn btn-primary"><i class="fa fa-fw fa-2x fa-chevron-left"></i></a></div>
    <div class="ybx-panel-panewrapper ui-yakabox-panel-panewrapper ui-background-flat ui-border-none">
      <div class="ybx-panel-contentpane ui-yakabox-panel-content ui-helper-clearfix">
        <div class="ybx-panel-navpane ui-buttonset-navpane btn-group"><button class="ybx-panel-navback ui-corner-all btn btn-link" title="Back"><i class="fa fa-arrow-right fa-rotate-180 fa-fw"></i></button><button class="ybx-panel-navforward ui-corner-right ui-corner-all btn btn-link" title="Forward"><i class="fa fa-arrow-right fa-fw"></i></button></div>
      </div>
    </div>
  </div>
  <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...

CSS

.flip-container {
				perspective: 1000px;
			} 
			.flip-container.hover .flipper {
				transform: rotateY(-180deg);
			}
			.flip-container, 
			.front, .back {
				height: 480px;
				width: 100%;
			}
			.flipper {
				transition: 0.6s;
				transform-style: preserve-3d;
				position: relative;
			}
			.front, .back {
				backface-visibility: hidden;
				position: absolute;
				top: 0;
				left: 0;
			}
			.front {
				z-index: 2;
				transform: rotateY(0deg);
			}
			.back {
				transform: rotateY(180deg);
			}

JavaScript

$(document).ready(function() {


    $('.list-group-item').on('click', function(){
	    $('.flip-container').addClass('hover');
    });
    
    $('.js-proto-back').on('click', function(){
	    $('.flip-container').removeClass('hover');
    });

    tinymce.init({
        selector: "div.editable",
        inline: true,
        menubar: false,
        toolbar_items_size: 'small',
 		invalid_styles: 
        {
        	'*': 'color font-size line-height'
    	},
        setup: function(editor) 
        {
        	editor.on('change', function(e) 
            {
            	console.log('change event', e);
                console.log(editor.getContent());
        	})
        }
    });
    
});