TinyMCE WYSIWYG Editor
TinyMCE is a powerful, feature-rich WYSIWYG editor that provides a modern editing experience with extensive customization options, plugins, and themes. It's widely used in web applications for rich text editing capabilities.
Quill Editor
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a clean, modern interface with a powerful API and extensive customization options for rich text editing.
UltraViolet Dashboard Features
Experience the power of modern web development with our comprehensive admin dashboard solution.
Advanced Analytics
Track your business metrics with our advanced analytics dashboard featuring:
- Real-time data visualization
- Interactive charts and graphs
- Customizable reports
- Export capabilities
User Management
Efficiently manage your users with our robust user management system:
- User registration and authentication
- Role-based access control
- Profile management
- Activity monitoring
"Innovation distinguishes between a leader and a follower." - Steve Jobs
Ready to transform your business operations? Get started today with UltraViolet Dashboard.
Implementation Examples
TinyMCE Editor
HTML markup and JavaScript initialization for TinyMCE editor with dark theme support.
HTML Markup:
<form method="post">
<textarea id="elm1" name="area">
<h2>Welcome to UltraViolet Admin Dashboard</h2>
<p>This is a comprehensive admin dashboard built with modern technologies.</p>
</textarea>
</form>JavaScript Initialization:
// TinyMCE initialization with dark theme support
tinymce.init({
selector: '#elm1',
height: 500,
skin: 'oxide',
content_css: 'default',
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; }',
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
// Dark theme support
function applyTinyMCEDarkTheme() {
const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
if (isDarkMode) {
tinymce.remove('#elm1');
tinymce.init({
selector: '#elm1',
height: 500,
skin: 'oxide-dark',
content_css: 'dark',
content_style: 'body { color: #dee2e6; background-color: #170229; }',
// ... same plugins and toolbar configuration
});
}
}Quill Editor
HTML markup and JavaScript initialization for Quill editor.
HTML Markup:
<div id="quill-editor">
<h2>UltraViolet Dashboard Features</h2>
<p>Experience the power of modern web development with our comprehensive admin dashboard solution.</p>
<h3>Advanced Analytics</h3>
<p>Track your business metrics with our advanced analytics dashboard.</p>
</div>JavaScript Initialization:
// Quill Editor initialization
var quill = new Quill('#quill-editor', {
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'align': [] }],
['link', 'image', 'video'],
['blockquote', 'code-block'],
['clean']
]
}
});
// Get editor content
var content = quill.root.innerHTML;
// Set editor content
quill.root.innerHTML = '<p>New content here</p>';Required CDN Links
Include these CDN links in your HTML head section:
<!-- TinyMCE CSS and JS -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.2/tinymce.min.js"></script>
<!-- Quill CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>Implementation Examples
TinyMCE Editor
HTML markup and JavaScript initialization for TinyMCE editor with dark theme support.
HTML Markup:
<form method="post">
<textarea id="elm1" name="area">
<h2>Welcome to UltraViolet Admin Dashboard</h2>
<p>This is a comprehensive admin dashboard built with modern technologies.</p>
</textarea>
</form>JavaScript Initialization:
// TinyMCE initialization with dark theme support
tinymce.init({
selector: '#elm1',
height: 500,
skin: 'oxide',
content_css: 'default',
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; }',
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
// Dark theme support
function applyTinyMCEDarkTheme() {
const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
if (isDarkMode) {
tinymce.remove('#elm1');
tinymce.init({
selector: '#elm1',
height: 500,
skin: 'oxide-dark',
content_css: 'dark',
content_style: 'body { color: #dee2e6; background-color: #170229; }',
// ... same plugins and toolbar configuration
});
}
}Quill Editor
HTML markup and JavaScript initialization for Quill editor.
HTML Markup:
<div id="quill-editor">
<h2>UltraViolet Dashboard Features</h2>
<p>Experience the power of modern web development with our comprehensive admin dashboard solution.</p>
<h3>Advanced Analytics</h3>
<p>Track your business metrics with our advanced analytics dashboard.</p>
</div>JavaScript Initialization:
// Quill Editor initialization
var quill = new Quill('#quill-editor', {
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'align': [] }],
['link', 'image', 'video'],
['blockquote', 'code-block'],
['clean']
]
}
});
// Get editor content
var content = quill.root.innerHTML;
// Set editor content
quill.root.innerHTML = '<p>New content here</p>';Required CDN Links
Include these CDN links in your HTML head section:
<!-- TinyMCE CSS and JS -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.2/tinymce.min.js"></script>
<!-- Quill CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>