Exclude styles in advanced text editor

B brindeau.joachim · 140 views · Updated 1 year ago

🚀 New Snippet Alert for Voxel Users!
Ever wanted more control over your form's text editor options? Now you can easily:- Hide specific heading styles (H1, H2, etc.)- Remove formatting buttons like bold, italic, or links- Customize each form field independently
Just add simple classes like 'exclude-h1' or 'exclude-bold' to your form fields, and you're done!Perfect for maintaining consistent styling.
Why is this important for SEO? ✅ Prevents multiple H1 tags on your pages✅ Maintains proper heading hierarchy✅ Ensures consistent content structure across all listings
🔍 Google loves well-structured content, and now you can ensure your users follow best SEO practices automatically!
🔧 Complete Guide: Text Editor Controls for Voxel Forms

Simply paste the snippet in your favorite snippet management plugin. How to use:1. Add classes to your form field2. Combine multiple excludes as needed3. Different settings for each field possible Example: "exclude-h1 exclude-h2 exclude-bold" All Available Options: 📝 Format Controls:• exclude-h1 - Remove Heading 1• exclude-h2 - Remove Heading 2• exclude-h3 - Remove Heading 3• exclude-h4 - Remove Heading 4• exclude-h5 - Remove Heading 5• exclude-h6 - Remove Heading 6• exclude-p - Remove Paragraph option ✍️ Text Styling:• exclude-bold - Remove Bold• exclude-italic - Remove Italic• exclude-strikethrough - Remove Strikethrough 📋 List Controls:• exclude-bullist - Remove Bullet List• exclude-numlist - Remove Numbered List 🔗 Link Options:• exclude-link - Remove Add Link• exclude-unlink - Remove Remove Link 📏 Layout Elements:• exclude-hr - Remove Horizontal Line• exclude-blockquote - Remove Blockquote• exclude-div - Remove Div• exclude-pre - Remove Preformatted• exclude-section - Remove Section• exclude-article - Remove Article• exclude-address - Remove Address

document.addEventListener('DOMContentLoaded', function() {
// Function to remove specific elements based on exclude classes
function removeEditorElements() {
// Find all exclude classes on the page
const excludeClasses = Array.from(document.querySelectorAll('[class*="exclude-"]'))
.reduce((classes, element) => {
const elementClasses = Array.from(element.classList);
return classes.concat(elementClasses.filter(className => className.startsWith('exclude-')));
}, []);

const headingMap = {
// Format dropdown options
'exclude-h1': 'Heading 1',
'exclude-h2': 'Heading 2',
'exclude-h3': 'Heading 3',
'exclude-h4': 'Heading 4',
'exclude-h5': 'Heading 5',
'exclude-h6': 'Heading 6',
'exclude-p': 'Paragraph',

// Button controls
'exclude-bold': 'Bold',
'exclude-italic': 'Italic',
'exclude-bullist': 'Bulleted list',
'exclude-numlist': 'Numbered list',
'exclude-link': 'Insert/edit link',
'exclude-unlink': 'Remove link',
'exclude-strikethrough': 'Strikethrough',
'exclude-hr': 'Horizontal line',

// Additional standard formats
'exclude-pre': 'Preformatted',
'exclude-blockquote': 'Blockquote',
'exclude-div': 'Div',
'exclude-section': 'Section',
'exclude-article': 'Article',
'exclude-address': 'Address',

// Additional common controls
'exclude-formatselect': 'Formats',
'exclude-styleselect': 'Styles',
'exclude-fontselect': 'Font Family',
'exclude-fontsizeselect': 'Font Sizes'
};

// Get the elements to exclude based on found exclude classes
const excludeElements = excludeClasses
.map(className => headingMap[className])
.filter(Boolean);

if (excludeElements.length === 0) return;

// Remove menu items
document.querySelectorAll('.mce-text').forEach(span => {
if (excludeElements.includes(span.textContent)) {
const menuItem = span.closest('.mce-menu-item');
if (menuItem) {
menuItem.remove();
}
}
});

// Remove toolbar buttons
document.querySelectorAll('.mce-btn').forEach(btn => {
const ariaLabel = btn.getAttribute('aria-label');
if (ariaLabel && excludeElements.some(element => {
// Handle special cases for buttons with keyboard shortcuts in aria-label
return ariaLabel.includes(element) || 
ariaLabel.split('(')[0].trim() === element;
})) {
btn.remove();
}
});
}

// Initial removal
removeEditorElements();

// Function to handle toolbar initialization
function handleToolbarInit() {
removeEditorElements();
}

// Create MutationObserver for dynamic changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
const hasRelevantNodes = Array.from(mutation.addedNodes).some(node => 
node.classList && (
node.classList.contains('mce-menu') || 
node.classList.contains('mce-toolbar') ||
node.classList.contains('mce-btn') ||
node.classList.contains('mce-container')
)
);

if (hasRelevantNodes) {
setTimeout(removeEditorElements, 0);
}
}
});
});

// Start observing with broader scope
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class', 'aria-label']
});

// Handle TinyMCE init if available
if (typeof tinymce !== 'undefined') {
tinymce.on('AddEditor', function(e) {
e.editor.on('init', handleToolbarInit);
});
}
});

JS · 118 lines

Discussion

Ask a question or share how you used this.

No comments yet — be the first.