Installation
TinyMCE version 8 is installed via NPM as a third-party dependency by referring to
package.json
.
Install TinyMCE v8 using
npm install tinymce@^8
.
During the
Theme Installation
process,
it is compiled by the
Build Tools
into the
/dist/assets/vendors/tinymce
directory.
Require Assets
To use TinyMCE in your pages, you need to include the following dependency assets in the order shown.
<!DOCTYPE html>
<html>
<head>
<!--Core styles (includes TinyMCE styling via tinymce.css component)-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<textarea id="editor"></textarea>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/tinymce/tinymce.min.js">
</script>
<!--Custom script -->
<script src="/dist/assets/js/pages/plugins/tinymce/basic.js">
</script>
</body>
</html>
Basic
A basic TinyMCE editor example demonstrating the default editor initialization with Metronic Tailwind CSS styling.
This example shows how to initialize a simple rich text editor that automatically adapts to the Metronic design system.
// Basic TinyMCE initialization
document.addEventListener('DOMContentLoaded', function() {
try {
// Verify TinyMCE is loaded
if (typeof tinymce === 'undefined') {
console.error('TinyMCE: TinyMCE library is not loaded. Please ensure tinymce.min.js is included.');
return;
}
var editorEl = document.getElementById('editor-basic');
if (!editorEl) {
console.warn('TinyMCE: Editor element #editor-basic not found');
return;
}
tinymce.init({
target: editorEl,
license_key: 'gpl',
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
toolbar_mode: 'sliding',
content_style: 'body { font-family: inherit; font-size: 14px; }',
setup: function(editor) {
editor.on('init', function() {
console.log('TinyMCE: Basic editor initialized successfully');
});
}
});
} catch (error) {
console.error('TinyMCE: Error initializing basic editor:', error);
}
});
<textarea id="editor-basic"></textarea>
Toolbar
This example demonstrates how to customize the TinyMCE toolbar with different button configurations.
All toolbar buttons automatically use Metronic Tailwind CSS styling.
// Custom toolbar configuration
document.addEventListener('DOMContentLoaded', function() {
try {
// Verify TinyMCE is loaded
if (typeof tinymce === 'undefined') {
console.error('TinyMCE: TinyMCE library is not loaded. Please ensure tinymce.min.js is included.');
return;
}
var editorEl = document.getElementById('editor-toolbar');
if (!editorEl) {
console.warn('TinyMCE: Editor element #editor-toolbar not found');
return;
}
tinymce.init({
target: editorEl,
license_key: 'gpl',
height: 400,
menubar: false,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'formatselect | bold italic underline strikethrough | ' +
'forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist | outdent indent | link image | code fullscreen',
toolbar_mode: 'sliding',
content_style: 'body { font-family: inherit; font-size: 14px; }',
setup: function(editor) {
editor.on('init', function() {
console.log('TinyMCE: Toolbar editor initialized successfully');
});
}
});
} catch (error) {
console.error('TinyMCE: Error initializing toolbar editor:', error);
}
});
<textarea id="editor-toolbar"></textarea>
Plugins
This example demonstrates various TinyMCE plugins including lists, links, images, tables, and more.
All plugin UI elements automatically use Metronic Tailwind CSS styling.
// Plugin integration example
document.addEventListener('DOMContentLoaded', function() {
try {
// Verify TinyMCE is loaded
if (typeof tinymce === 'undefined') {
console.error('TinyMCE: TinyMCE library is not loaded. Please ensure tinymce.min.js is included.');
return;
}
var editorEl = document.getElementById('editor-plugins');
if (!editorEl) {
console.warn('TinyMCE: Editor element #editor-plugins not found');
return;
}
tinymce.init({
target: editorEl,
license_key: 'gpl',
height: 400,
menubar: true,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
'emoticons', 'codesample', 'directionality', 'pagebreak',
'nonbreaking', 'visualchars', 'quickbars'
],
toolbar: 'undo redo | blocks | ' +
'bold italic underline strikethrough | forecolor backcolor | ' +
'alignleft aligncenter alignright alignjustify | ' +
'bullist numlist | outdent indent | link image media table | ' +
'charmap emoticons codesample | code fullscreen preview | help',
toolbar_mode: 'sliding',
content_style: 'body { font-family: inherit; font-size: 14px; }',
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
quickbars_insert_toolbar: 'quickimage quicktable',
setup: function(editor) {
editor.on('init', function() {
console.log('TinyMCE: Plugins editor initialized successfully');
});
}
});
} catch (error) {
console.error('TinyMCE: Error initializing plugins editor:', error);
}
});
<textarea id="editor-plugins"></textarea>
Form Integration
This example demonstrates TinyMCE integrated with Metronic form components.
The editor seamlessly integrates with Metronic form layouts and styling.
// Form integration example
document.addEventListener('DOMContentLoaded', function() {
try {
// Verify TinyMCE is loaded
if (typeof tinymce === 'undefined') {
console.error('TinyMCE: TinyMCE library is not loaded. Please ensure tinymce.min.js is included.');
return;
}
var editorEl = document.getElementById('editor-form-integration');
if (!editorEl) {
console.warn('TinyMCE: Editor element #editor-form-integration not found');
return;
}
tinymce.init({
target: editorEl,
license_key: 'gpl',
height: 300,
menubar: false,
plugins: [
'autolink', 'lists', 'link'
],
toolbar: 'undo redo | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist | link',
toolbar_mode: 'sliding',
content_style: 'body { font-family: inherit; font-size: 14px; }',
setup: function(editor) {
editor.on('init', function() {
console.log('TinyMCE: Form integration editor initialized successfully');
});
editor.on('change', function() {
editor.save();
});
}
});
} catch (error) {
console.error('TinyMCE: Error initializing form integration editor:', error);
}
});
<div class="card">
<div class="card-body">
<form>
<div class="grid gap-5">
<!-- Title Input Field -->
<div class="w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="kt-form-label flex items-center gap-1 max-w-32">
Title
</label>
<input class="kt-input grow" name="title" placeholder="Enter title" type="text" value=""/>
</div>
</div>
<!-- TinyMCE Content Editor Field -->
<div class="w-full">
<div class="flex items-start flex-wrap lg:flex-nowrap gap-2.5">
<label class="kt-form-label flex items-center gap-1 max-w-32 pt-2">
Content
</label>
<div class="grow">
<textarea id="editor-form-integration"></textarea>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="flex justify-end pt-2.5">
<button class="kt-btn kt-btn-primary" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
Readonly Editor
Readonly mode displays content that cannot be modified. This example demonstrates how to initialize a TinyMCE editor in readonly mode, useful for displaying formatted content that users should view but not edit.
The readonly editor automatically uses Metronic Tailwind CSS styling.
// Readonly editor example
document.addEventListener('DOMContentLoaded', function() {
try {
// Verify TinyMCE is loaded
if (typeof tinymce === 'undefined') {
console.error('TinyMCE: TinyMCE library is not loaded. Please ensure tinymce.min.js is included.');
return;
}
var editorEl = document.getElementById('editor-readonly');
if (!editorEl) {
console.warn('TinyMCE: Editor element #editor-readonly not found');
return;
}
tinymce.init({
target: editorEl,
license_key: 'gpl',
height: 200,
menubar: false,
readonly: true,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: false,
toolbar_mode: 'sliding',
content_style: 'body { font-family: inherit; font-size: 14px; }',
init_instance_callback: function(editor) {
editor.setContent('
<p>
This is a readonly editor. The content cannot be modified.
</p>
');
},
setup: function(editor) {
editor.on('init', function() {
console.log('TinyMCE: Readonly editor initialized successfully');
});
}
});
} catch (error) {
console.error('TinyMCE: Error initializing readonly editor:', error);
}
});
<div>
<textarea id="editor-readonly"></textarea>
</div>
Custom Configuration
Custom configuration demonstrates advanced options like automatic uploads, image handling, and extended plugins. This example shows how to configure TinyMCE with a comprehensive set of features including extended toolbar, multiple plugins, and advanced content handling options.
The custom configuration editor automatically uses Metronic Tailwind CSS styling.
// Custom configuration editor example
document.addEventListener('DOMContentLoaded', function() {
try {
// Verify TinyMCE is loaded
if (typeof tinymce === 'undefined') {
console.error('TinyMCE: TinyMCE library is not loaded. Please ensure tinymce.min.js is included.');
return;
}
var editorEl = document.getElementById('editor-custom-config');
if (!editorEl) {
console.warn('TinyMCE: Editor element #editor-custom-config not found');
return;
}
tinymce.init({
target: editorEl,
license_key: 'gpl',
height: 400,
menubar: true,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
'codesample', 'directionality', 'pagebreak',
'nonbreaking', 'visualchars', 'quickbars'
],
toolbar: 'undo redo | blocks | ' +
'bold italic underline strikethrough | forecolor backcolor | ' +
'alignleft aligncenter alignright alignjustify | ' +
'bullist numlist | outdent indent | link image media table | ' +
'charmap codesample | code fullscreen preview | help',
toolbar_mode: 'sliding',
content_style: 'body { font-family: inherit; font-size: 14px; }',
automatic_uploads: true,
file_picker_types: 'image',
paste_data_images: true,
image_advtab: true,
link_assume_external_targets: true,
convert_urls: false,
setup: function(editor) {
editor.on('init', function() {
console.log('TinyMCE: Custom configuration editor initialized successfully');
});
editor.on('change', function() {
editor.save();
});
}
});
} catch (error) {
console.error('TinyMCE: Error initializing custom configuration editor:', error);
}
});
<div>
<textarea id="editor-custom-config"></textarea>
</div>
