Enhanced Text Editor

The Enhanced TinyMCE Editor function adds extra features to Voxel’s WP Editor field when using Advanced mode. Users can insert media, change text colors, and add special characters directly from the frontend editor.

Overview

When your Voxel post types include a WP Editor field in Advanced mode, this function enhances it with additional toolbar buttons. Users can create richer content with images, colored text, and special symbols – all while maintaining security through proper content sanitization.

Key Features

• Add Media button for uploading images, videos, and audio
• Text color picker
• Background color picker
• Character map for special symbols
• Frontend CSS for proper image alignment
• Secure content sanitization

Setup Instructions

Step 1: Enable the Function

1. Navigate to Voxel Toolkit → Functions in your WordPress admin
2. Find Enhanced TinyMCE Editor in the list
3. Toggle the switch to enable the function
4. Click Save Changes

Step 2: Configure WP Editor Field

Make sure your WP Editor field is set to Advanced mode:

1. Go to Voxel → Post Types
2. Edit your post type
3. Find your WP Editor field
4. Set Editor Type to Advanced
5. Save the post type

The enhanced features will now appear in the editor toolbar when users create or edit posts.

Enhanced Features

Add Media Button

Allows users to upload and insert media files directly into their content:

• Images – Upload or select from media library
• Videos – Embed video files
• Audio – Insert audio players

Images can be aligned left, center, or right with text wrapping automatically applied.

Text Color

A color picker for changing text color. Users can:

• Select from preset colors
• Use a custom color picker
• Apply to selected text

Background Color

Highlight text with background colors:

• Select from preset highlight colors
• Use a custom color picker
• Create emphasis and callouts

Character Map

Insert special characters and symbols:

• Currency symbols (€, £, ¥)
• Mathematical symbols (±, ÷, ×)
• Arrows and pointers (→, ←, ↑)
• Punctuation marks
• Accented characters

Image Alignment

The function includes frontend CSS that properly displays image alignment:

Left Alignment

Image floats to the left with text wrapping around the right side.

Right Alignment

Image floats to the right with text wrapping around the left side.

Center Alignment

Image displays centered with text above and below.

Use Cases

Blog Posts

Allow authors to create visually rich blog posts with inline images and formatted text.

Listing Descriptions

Let business owners add photos and formatted text to their listing descriptions.

Article Content

Enable article writers to create professional-looking content with proper formatting.

Product Details

Allow sellers to include product images inline with their descriptions.

Troubleshooting

Toolbar Buttons Not Appearing

• Check that the function is enabled
• Verify the WP Editor field is set to Advanced mode
• Make sure you are logged in
• Clear browser cache and reload

Media Upload Not Working

• Check user has permission to upload media
• Verify file type is allowed by WordPress
• Check if file size exceeds upload limit
• Ensure media library is accessible

Image Alignment Not Working on Frontend

• Check if theme CSS is overriding alignment styles
• Verify the function’s CSS is loading properly
• Try adding images with explicit alignment set