<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
Basic Demo
</h3>
</div>
<div class="card-body">
<textarea id="kt-tinymce-1" name="kt-tinymce-1" class="tox-target">
<h1>Quick and Simple TinyMCE 5 Integration</h1>
<p>Here goes the <a href="#">Minitial content of the editor</a>. Lorem Ipsum is simply dummy text of the <em>printing and typesetting</em> industry.</p>
<blockquote>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</blockquote>
<h3 style="text-align: right;">Flexible & Powerful</h3>
<p style="text-align: right;"><strong>Lorem Ipsum has been the industry's</strong> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</textarea>
</div>
</div>
// Class definition
var KTTinymce = function () {
// Private functions
var demos = function () {
tinymce.init({
selector: '#kt-tinymce-1',
toolbar: false,
statusbar: false
});
}
return {
// public functions
init: function() {
demos();
}
};
}();
// Initialization
jQuery(document).ready(function() {
KTTinymce.init();
});
<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
TinyMCE with Toolbar
</h3>
</div>
<div class="card-body">
<textarea id="kt-tinymce-2" name="kt-tinymce-2" class="tox-target">
<h1>Quick and Simple TinyMCE 5 Integration</h1>
<p>Here goes the <a href="#">Minitial content of the editor</a>. Lorem Ipsum is simply dummy text of the <em>printing and typesetting</em> industry.</p>
<blockquote>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</blockquote>
<h3 style="text-align: right;">Flexible & Powerful</h3>
<p style="text-align: right;"><strong>Lorem Ipsum has been the industry's</strong> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</textarea>
</div>
</div>
// Class definition
var KTTinymce = function () {
// Private functions
var demos = function () {
tinymce.init({
selector: '#kt-tinymce-2'
});
}
return {
// public functions
init: function() {
demos();
}
};
}();
// Initialization
jQuery(document).ready(function() {
KTTinymce.init();
});
<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
TinyMCE with Plugins
</h3>
</div>
<div class="card-body">
<div class="tinymce">
<textarea id="kt-tinymce-3" name="kt-tinymce-3" class="tox-target">
<h1>Quick and Simple TinyMCE 5 Integration</h1>
<p>Here goes the <a href="#">Minitial content of the editor</a>. Lorem Ipsum is simply dummy text of the <em>printing and typesetting</em> industry.</p>
<blockquote>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</blockquote>
<h3 style="text-align: right;">Flexible & Powerful</h3>
<p style="text-align: right;"><strong>Lorem Ipsum has been the industry's</strong> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</textarea>
</div>
</div>
</div>
// Class definition
var KTTinymce = function () {
// Private functions
var demos = function () {
tinymce.init({
selector: '#kt-tinymce-3',
toolbar: 'advlist | autolink | link image | lists charmap | print preview',
plugins : 'advlist autolink link image lists charmap print preview'
});
}
return {
// public functions
init: function() {
demos();
}
};
}();
// Initialization
jQuery(document).ready(function() {
KTTinymce.init();
});
<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
TinyMCE with Hidden Menubar
</h3>
</div>
<div class="card-body">
<div class="tinymce">
<textarea id="kt-tinymce-4" name="kt-tinymce-4" class="tox-target">
<h1>Quick and Simple TinyMCE 5 Integration</h1>
<p>Here goes the <a href="#">Minitial content of the editor</a>. Lorem Ipsum is simply dummy text of the <em>printing and typesetting</em> industry.</p>
<blockquote>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</blockquote>
<h3 style="text-align: right;">Flexible & Powerful</h3>
<p style="text-align: right;"><strong>Lorem Ipsum has been the industry's</strong> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</textarea>
</div>
</div>
</div>
// Class definition
var KTTinymce = function () {
// Private functions
var demos = function () {
tinymce.init({
selector: '#kt-tinymce-4',
menubar: false,
toolbar: ['styleselect fontselect fontsizeselect',
'undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify',
'bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview | code'],
plugins : 'advlist autolink link image lists charmap print preview code'
});
}
return {
// public functions
init: function() {
demos();
}
};
}();
// Initialization
jQuery(document).ready(function() {
KTTinymce.init();
});
