New Froala Editor v5.0.0 is here – Learn More
Content Safety Made Simple
Combine Froala's powerful rich text editor with Filestack's intelligent content moderation to create safe, professional content experiences.
new FroalaEditor('#editor', {
pluginsEnabled: ['filestack'],
filestackOptions: {
onFileUploadFinished: (file) => {
// SFW Detection
const url = `workflow/${file.handle}`;
fetch(url).then(checkSafety);
}
}
});
10+
Frameworks
100+
Editor Plugins
15K+
Github Stars
8+
Years Trusted
100+
Editor Plugins
15K+
Github Stars
10+
Frameworks
8+
Years Trusted
Powerful Features for Safe Content
Everything you need to create, edit, and moderate content with confidence
Rich Text Editor
Professional WYSIWYG editor with 38+ plugins and modern UI components
Real-time Processing
Instant content analysis and feedback as users create and upload
Content Moderation
AI-powered Safe-for-Work detection with 99%+ accuracy for all uploads
Easy Integration
Simple setup with React, Vue, Angular, and vanilla JavaScript
File Management
Seamless file uploads with global CDN and intelligent processing
Enterprise Ready
Trusted by Fortune 500 companies with enterprise-grade security
Try the Live Demo
Experience the seamless integration of Froala's editor with Filestack's content moderation
- Live Editor
- SFW Detection Enabled
📝 Try typing, formatting text, or uploading an image to test the content safety features
Implementation Guide
Follow these steps to integrate content safety into your application in under 30 minutes.
1
Set Up Your Froala Editor
Install and configure Froala Editor with the Filestack plugin enabled.
// Install Froala Editor
npm install froala-editor
// Initialize with Filestack plugin
new FroalaEditor('#editor', {
pluginsEnabled: ['filestack', 'image'],
filestackOptions: {
filestackAPI: 'YOUR_API_KEY'
}
});
2
Create Filestack Workflow
Set up a workflow in your Filestack dashboard with SFW (Safe for Work) task.
1. Access Dashboard
Login to your Filestack developer dashboard with your account credentials.
2. Navigate to Workflows
Find and click on the “Workflows” section in the main navigation menu.
3. Add SFW Task
Create a new workflow and add the Safe-for-Work detection task.- Dashboard Checklist
1
Login to Filestack Dashboard
2
Navigate to Workflows section
3
Create new workflow
4
Add SFW detection task
5
Copy generated workflow ID
- Required Configuration
API Key
From your account settings page
Workflow ID
Generated UUID from workflow creation
Security Policy
Base64 encoded security policy
Policy Signature
HMAC signature for policy verification
3
Implement SFW Detection
Add the upload callback to automatically check images for appropriate content.
// Add upload callback for SFW detection
filestackOptions: {
pickerOptions: {
onFileUploadFinished: (file) => {
const workflowURL = `https://cdn.filestackcontent.com/` +
`security=p:${POLICY},s:${SIGNATURE}/` +
`run_workflow=id:${WORKFLOW_ID}/${file.handle}`;
fetch(workflowURL)
.then(res => res.json())
.then(data => {
if (data.data.sfw === true) {
console.log('✅ Safe content');
} else {
console.log('⚠️ Unsafe content');
}
});
}
}
}
4
Handle Detection Results
Implement your business logic to handle safe and unsafe content appropriately.
- Safe Content Actions
- Allow content publication
- Show success notification
- Enable sharing features
- Add to content feeds
- Unsafe Content Actions
- Block content upload
- Show warning message
- Request content review
- Log for compliance
✓
You're All Set!
Your content safety integration is now live. Users can create rich content while your platform automatically moderates uploaded images.
Ready to get started?
Try the demo above or check out our documentation for advanced features.
Complete Code Example
Here's the full implementation code you can copy and paste into your project.
<!-- HTML Structure -->
<div id="editor"></div>
<!-- Include Scripts -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.6.2/js/froala_editor.pkgd.min.js"></script>
<script src="https://static.filestackapi.com/filestack-js/4.0.0/filestack.min.js"></script>
<script>
// Configuration
const FILESTACK_API_KEY = "YOUR_FILESTACK_API_KEY";
const SFW_WORKFLOW_ID = "YOUR_WORKFLOW_UUID";
const POLICY = "YOUR_SECURITY_POLICY_BASE64";
const SIGNATURE = "YOUR_POLICY_SIGNATURE";
// Initialize Froala Editor with Filestack
new FroalaEditor('#editor', {
pluginsEnabled: ['filestack', 'image', 'link', 'table'],
// Filestack Integration Configuration
filestackOptions: {
filestackAPI: FILESTACK_API_KEY,
uploadToFilestackOnly: true,
// Upload callback with SFW detection
pickerOptions: {
onFileUploadFinished: (file) => {
console.log('File uploaded:', file);
// Construct workflow URL for SFW detection
const handle = file.handle;
const workflowURL = `https://cdn.filestackcontent.com/
security=p:${POLICY},s:${SIGNATURE}/
run_workflow=id:${SFW_WORKFLOW_ID}/${handle}`;
// Execute SFW workflow
fetch(workflowURL)
.then(response => response.json())
.then(data => {
console.log('SFW Detection Result:', data);
if (data.data && data.data.sfw === true) {
showNotification("✅ Image is safe for work", "success");
} else {
showNotification("⚠️ Image contains inappropriate content", "warning");
removeUnsafeContent(file);
}
})
.catch(error => {
console.error('SFW Detection Error:', error);
showNotification("❌ Unable to verify image safety", "error");
});
}
}
},
// Editor styling and behavior
theme: 'royal',
height: 300,
placeholderText: 'Start typing your content here...'
});
// Helper functions
function showNotification(message, type) {
// Implement your notification system
alert(message);
}
function removeUnsafeContent(file) {
// Implement content removal logic
console.log('Removing unsafe content:', file);
}
</script>
