test tinymce inline

test tinymce

by DugSohn

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>
<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>
<p>hello</p>
<p>hello</p>

<div class="editable" >
This is an editable div element element.
</div>

<div class="editable" >
This is another editable div element element.
</div>

CSS

.editable
{
	
}

JavaScript

$(document).ready(function()
{

    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());
        	})
        }
    });
    
});