DEV Community

Cover image for Mastering Froala Helpers for Device Detection, URL Safety, and More
Froala
Froala

Posted on • Originally published at froala.com

Mastering Froala Helpers for Device Detection, URL Safety, and More

#froala

By Mostafa Yousef

When building advanced experiences with the Froala WYSIWYG Editor, developers often find themselves writing extra JavaScript to handle things like device detection, scroll behavior, or URL validation.

But here’s the good news — Froala already provides a built-in solution for that: Helpers.

Helpers are small, smart utilities bundled inside Froala that make your code cleaner, faster, and easier to maintain. In this article, we’ll explore some of the most useful helpers — from detecting mobile devices to keeping your URLs safe.

🔑 Key Takeaways

  • Froala Helpers provide small yet powerful utilities that simplify editor customization.

  • You can detect devices (mobile, iOS, Android, etc.) to deliver tailored UI experiences.

  • Use scroll helpers to keep toolbars or elements aligned as users scroll.

  • The sanitizeURL() helper adds a vital layer of security for link handling.

  • Helpers make your code simpler, faster, and more consistent across platforms.

Whether you’re fine-tuning the editor’s UX or building a custom plugin, helpers let you focus on features — not boilerplate code.

🌟 What Are Froala Helpers?

Froala Helpers are utility functions accessible via editor.helpers. They’re designed to simplify common tasks that developers repeatedly need when customizing the editor or building plugins.

For example, you can:

  • Detects whether the user is on iOS or Android.

  • Check if the editor is being used on a touch device.

  • Get the scroll position of the page.

  • Sanitize URLs before inserting them into the editor.

Instead of writing this logic manually, you can use these helpers directly from the Froala instance.

const editor = new FroalaEditor('#editor', {});

console.log(editor.helpers.isMobile()); // true or false
Enter fullscreen mode Exit fullscreen mode

These small methods pack a big productivity punch — they save time, improve reliability, and help you create smarter editor experiences.

⚙️ Why Froala Helpers Matter

When customizing Froala, developers often deal with:

  • Device-based UI adjustments (e.g., hiding toolbars on mobile)

  • Handling touch versus keyboard input

  • Keeping toolbars visible during scrolling

  • Cleaning URLs to prevent unsafe content

Without helpers, these tasks can be repetitive and prone to cross-browser issues. Froala Helpers provide ready-made, tested, and optimized solutions that work consistently across devices and browsers.

Top benefits include:

  • 🧠 Simplicity: No need to reinvent the wheel.

  • ⚡ Performance: Built-in and optimized for speed.

  • 🧩 Consistency: Reliable behavior across all browsers.

  • 🛡️ Security: Safer URL handling and cleaner code.

📱 Device Detection Helpers

Let’s start with the helpers that detect user devices. These are especially useful when building responsive, adaptive experiences in Froala.

1. helpers.isMobile()

Detects if the user is on any mobile device.

Example:

if (editor.helpers.isMobile()) {

  console.log('Mobile layout activated');

}
Enter fullscreen mode Exit fullscreen mode

Use Case: Load a simplified toolbar or disable certain features on smaller screens for a smoother mobile experience.

2. helpers.isAndroid()

Detects Android devices.

Example:

if (editor.helpers.isAndroid()) {

  console.log('Running on Android');

}
Enter fullscreen mode Exit fullscreen mode

Use Case: Handle Android-specific quirks — for example, adjusting cursor handling or input focus behavior in Chrome on Android.

3. helpers.isBlackberry()

Checks if the user is on a Blackberry device.

Example:

if (editor.helpers.isBlackberry()) {
console.log('Blackberry device detected');
}
Enter fullscreen mode Exit fullscreen mode

Use Case: Though Blackberry devices are rare today, this can still help in enterprise or legacy applications that must support older systems.

4. helpers.isIOS()

Detects whether the editor is running on iPhone or iPad.

Example:

if (editor.helpers.isIOS()) {
console.log('Running on iOS');
}
Enter fullscreen mode Exit fullscreen mode

Use Case: Adjust touch or clipboard behaviors that behave differently in Safari on iOS.

5. helpers.isMac()

Detects if the system is macOS.

Example:

if (editor.helpers.isMac()) {
console.log('Mac detected');
}
Enter fullscreen mode Exit fullscreen mode

Use Case: Use platform-specific keyboard shortcuts — for example, using the Command (⌘) key instead of Control.

6. helpers.isTouch()

Checks if the device supports touch input.

Example:

if (editor.helpers.isTouch()) {
console.log('Touch input detected');
}
Enter fullscreen mode Exit fullscreen mode

Use Case: Switch hover interactions to tap interactions for touch screens.

7. helpers.isWindowsPhone()

Detects Windows Phone browsers.

Example:

if (editor.helpers.isWindowsPhone()) {
console.log('Windows Phone device detected');
}
Enter fullscreen mode Exit fullscreen mode

Use Case: Support or test compatibility for legacy Windows Phone browsers.

🧩 Pro Tip: Combine these helpers for more granular targeting.

if (editor.helpers.isMobile() && editor.helpers.isIOS()) {
console.log('Optimize editor for iPhone users');
}
Enter fullscreen mode Exit fullscreen mode

🧭 Scrolling Helpers

These helpers come in handy when you need to respond to the editor’s scroll position — for example, repositioning floating toolbars or syncing UI elements as users scroll.

8. helpers.scrollTop()

Gets the vertical scroll position.

Example:

const top = editor.helpers.scrollTop();
console.log('Scroll top:', top);
Enter fullscreen mode Exit fullscreen mode

Use Case: Keep floating toolbars in view when the editor or window is scrolled.

9. helpers.scrollLeft()

Gets the horizontal scroll position.

Example:

const left = editor.helpers.scrollLeft();
console.log('Scroll left:', left);
Enter fullscreen mode Exit fullscreen mode

Use Case: Useful for horizontally scrollable tables or editors embedded in side-by-side layouts where toolbar alignment matters.

🔒 URL Sanitization Helper

Security is a big concern in rich text editors — especially when users can insert links. That’s where Froala’s sanitizeURL() helper shines.

10. helpers.sanitizeURL(url)

Cleans a URL to ensure it’s valid and safe before being inserted into the editor.

Example:

const userInputURL = "javascript:alert('xss')";
const safeURL = editor.helpers.sanitizeURL(userInputURL);
console.log(safeURL); // outputs an empty string
Enter fullscreen mode Exit fullscreen mode

Use Case: Prevent users from inserting malicious or invalid links. This adds an extra layer of protection against XSS (Cross-Site Scripting) attacks and ensures that all URLs embedded in your content are safe and well-formed.

🧩 Putting It All Together: Real-World Scenarios

Here are a few ways you can combine helpers for practical results.

🧠 Example 1: Adaptive Toolbar for Mobile 

if (editor.helpers.isMobile() || editor.helpers.isTouch()) {
editor.opts.toolbarBottom = true;
}
Enter fullscreen mode Exit fullscreen mode

Move the toolbar to the bottom of the editor when users are on touch devices for better usability.

⌨️ Example 2: Platform-Specific Shortcuts 

if (editor.helpers.isMac()) {
console.log('Use ⌘ + B for bold');
} else {
console.log('Use Ctrl + B for bold');
}
Enter fullscreen mode Exit fullscreen mode

Adjust keyboard shortcuts dynamically for macOS vs Windows.

🔐 Example 3: Safe Link Insertion 

const url = editor.helpers.sanitizeURL(userInput);
if (url) {
editor.html.insert(`<a href="${url}">${url}</a>`);
}
Enter fullscreen mode Exit fullscreen mode

Always sanitize URLs before inserting them into content.

🚀 Benefits Recap

Here’s what Froala Helpers bring to your development workflow:

BenefitDescription🧠 Simpler CodeNo need to reimplement device or scroll detection logic.⚙️ ConsistencyUnified results across browsers and platforms.📱 AdaptabilityCreate responsive editor experiences that adjust to devices.🔒 SecurityKeep your content safe with sanitized URLs.⚡ EfficiencyLightweight, optimized, and built right into Froala.

🏁 Conclusion

Froala Helpers may seem small, but they can make a big impact on your editor customization workflow. Whether you’re optimizing for mobile users, maintaining layout stability while scrolling, or keeping your content secure — these helpers make the process faster, cleaner, and more reliable.

So next time you build a Froala plugin or tweak your editor configuration, remember: 👉 You don’t have to do it alone — let Froala Helpers do the heavy lifting.

✨ Ready to Build Smarter with Froala?

Experience how Froala’s clean design, blazing-fast performance, and developer-friendly APIs make rich text editing effortless.

👉 Download the Editor today and start creating beautiful, responsive editing experiences in minutes!

❓ Frequently Asked Questions (FAQ)

What are Froala Helpers used for?

Froala Helpers are small utility functions that simplify common coding tasks like device detection, scroll handling, and URL sanitization when customizing the Froala Editor.

How do I access helpers in Froala?

All helpers can be accessed through your editor instance:

const editor = new FroalaEditor('#editor');
editor.helpers.isMobile();
Enter fullscreen mode Exit fullscreen mode

Are Froala Helpers available in all versions of the editor?

Yes. Helpers are included in all modern Froala Editor builds and can be used without extra setup or configuration.

Can I combine multiple helpers together?

Absolutely. You can use multiple helpers to create adaptive logic, such as:

if (editor.helpers.isMobile() && editor.helpers.isIOS()) {
// Apply iPhone-specific UI tweaks
}
Enter fullscreen mode Exit fullscreen mode

Why should I use sanitizeURL()?

sanitizeURL() ensures that any URL added to your editor content is valid and safe. It helps prevent XSS and other malicious code injections.

Are Froala Helpers limited to the editor area?

No. While they’re designed for editor-related tasks, helpers can be used in broader contexts — for example, to detect device types before initializing Froala or to manage layout responsiveness.

Where can I learn more about Froala Helpers?

You can explore the full list of available helpers and examples in the official Froala Editor Documentation.

Originally published on the Froala blog.

Top comments (0)