Jodit Cloud
Jodit Cloud allows you to use Jodit PRO without the need to download and host files on your server. Instead, the editor loads directly from our CDN using your unique API key.
Why Choose Jodit Cloud?
🚀 Zero Setup Required
- No file downloads - No need to download and host Jodit files on your server
- No style imports - CSS styles are automatically included with the script
- No license configuration - API key handles all licensing automatically
- Instant deployment - Just add one script tag and you're ready to go
🎯 Smart Auto-Detection
- Browser compatibility - Automatically serves the right JavaScript version:
- ES5 for older browsers (IE11+)
- ES2021 for modern browsers
- Perfect compatibility without manual configuration
- Language detection - Automatically detects user's language and loads only necessary language files
- Optimized loading - Only the required resources are loaded for each user
🛠 Custom Build Integration
- Builder support - Create custom Jodit builds at https://xdsoft.net/jodit/builder/
- Plugin selection - Include only the plugins you need
- Automatic updates - Your custom build is automatically served through Cloud
- Optimized performance - Smaller bundle size with only required features
🔄 Always Up-to-Date
- Automatic updates - Latest versions delivered instantly (when using "latest" setting)
- Zero maintenance - No need to manually update files on your server
- Security patches - Immediate access to security updates
- New features - Get new functionality as soon as it's released
Getting an API Key
- Purchase a Jodit Cloud license in the account dashboard
- After successful payment, an API key is automatically created for your order
- Find your order in the My Orders section and open the order details
- In the order settings, you will find your unique API key
⚠️ Important: API keys become active approximately 15 minutes after purchase or generation. Please allow this time for the system to fully activate your key before testing.
Basic Setup
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Jodit Cloud Example</title>
<!-- Loading Jodit Cloud with your API key -->
<script src="https://cloud.xdsoft.net/v4/jodit-pro/?key=YOUR_API_KEY"></script>
</head>
<body>
<textarea id="editor">Hello world!</textarea>
<script>
JoditLoader.ready().then(() => {
const editor = Jodit.make('#editor', {
// Your editor settings
});
});
</script>
</body>
</html>
Copy
With File Upload
<script>
JoditLoader.ready().then(() => {
const editor = Jodit.make('#editor', {
uploader: {
url: 'https://yourserver.com/upload',
format: 'json',
filesVariableName: 'files'
},
filebrowser: {
ajax: {
url: 'https://yourserver.com/filebrowser',
format: 'json'
}
}
});
});
</script>
Copy
API Key Settings
In your account dashboard, you can configure the following parameters for your API key:
ECMAScript Version
Choose the JavaScript version to be loaded:
- auto - Automatic detection based on user's browser
- es5 - Compatibility with older browsers (IE11+)
- es2015 - Modern browsers with ES6 support
- es2018 - Browsers with async/await support
- es2021 - Latest browsers
Jodit Version
- latest - Always load the latest version (recommended)
- Specific version - Lock to a specific version (e.g., "4.0.1")
Minification
- Enabled - Load minified files (smaller size, recommended for production)
- Disabled - Load unminified files (useful for development and debugging)
Allowed Domains (Referrers)
Referrers are a critical security feature that protects your API key from unauthorized use.
What are Referrers?
Referrers specify which domains are authorized to use your API key. When a browser requests the Jodit Cloud script, our system checks the HTTP referrer header to verify that the request comes from an allowed domain.
Why Configure Referrers Correctly?
- Prevent unauthorized usage - Without proper referrer settings, anyone could copy your script URL and use your API key on their website
- Protect your license - Unauthorized usage counts against your license limits and could affect performance
- Control access - Only websites you own or trust can load the editor using your API key
- Security by design - If someone tries to access the script URL directly in a browser or from an unauthorized domain, the system will refuse to serve the content
How Referrer Protection Works
- When a webpage loads the Jodit Cloud script, the browser sends a referrer header
- Our system checks if the referrer matches your configured allowed domains
- If the referrer is authorized → script loads successfully
- If the referrer is not authorized or missing → request is blocked (returns 403 Forbidden)
- Direct URL access (no referrer) → also blocked for security
Referrer Configuration Examples:
- localhost - Allowed by default for development and testing
- example.com - Allow only the exact domain
- *.example.com - Allow all subdomains (wildcard pattern)
- subdomain.example.com - Allow specific subdomain only
Best Practices:
- Always specify your production domains - Don't rely on default settings
- Use wildcards carefully -
*.example.com allows ANY subdomain
- Include both www and non-www versions if needed
- Test thoroughly - Verify your editor loads correctly from all intended domains
- Keep the list minimal - Only include domains you actually use
Language Optimization
Jodit Cloud provides intelligent language loading to optimize performance and user experience.
Language Loading Options:
-
Full (Default) - All language packages are disabled in the build, providing the smallest possible bundle size. The editor will use English interface only.
-
Auto - Automatically detects the user's browser language and loads only the necessary language files. This provides the best user experience while keeping bundle size optimal.
-
Specific Language - Load only a particular language (e.g., Russian, German, Japanese). Perfect when you know your audience uses a specific language.
How Auto Language Detection Works:
- User visits your website with Jodit Cloud editor
- Browser language is detected automatically (e.g.,
navigator.language)
- Only the matching language pack is loaded dynamically
- Interface appears in the user's native language
- Fallback to English if the user's language is not available
Available Languages:
Arabic, Czech, German, English, Spanish, Finnish, French, Hebrew, Hungarian, Indonesian, Italian, Japanese, Korean, Dutch, Polish, Portuguese (Brazil), Russian, Turkish, Chinese (Simplified), Chinese (Traditional), Ukrainian, Norwegian
Benefits of Language Optimization:
- Faster loading - Only required language files are downloaded
- Better UX - Users see the editor in their native language
- Reduced bandwidth - Smaller bundle sizes
- Global compatibility - Support for 20+ languages
- Automatic detection - No manual configuration needed for international sites
When to Use Each Option:
- Full - Single-language sites (English only) or when you handle translations separately
- Auto - International websites with global audience
- Specific - Target audience primarily uses one non-English language
API Key Management
Accessing Cloud Settings
For all license types (not just cloud-specific licenses):
- Go to your account dashboard
- View any paid order in your orders list
- Click the "Cloud Settings" button at the bottom of the order details
- This will take you to the dedicated Cloud Settings page
Viewing Settings
The Cloud Settings page provides a comprehensive interface with:
Left Panel - API Key Management:
- Current API key and expiration status
- Configuration options (ECMAScript version, language, referrers, etc.)
- License extension and trial key creation options
Right Panel - Instructions:
- Step-by-step setup guide
- Code examples for HTML, React, and Vue.js
- Configuration explanations
This layout allows you to configure your settings while having the instructions readily available for reference.
Editing Settings
- Change the necessary parameters
- Click "Save Settings" to save changes
- Changes take effect within 15 minutes
⚠️ Note: Setting changes (ECMAScript version, language, referrers, etc.) require up to 15 minutes to propagate through our CDN cache. Please wait before testing after making changes.
Regenerating API Key
If you suspect your API key has been compromised:
- Click the "Regenerate API Key" button
- Confirm the action in the dialog box
- The old key stops working immediately
- Update your code with the new API key
- Wait 15 minutes for the new key to become fully active
⚠️ Important: After regenerating your API key, allow up to 15 minutes for the new key to be activated across all CDN servers before using it in production.
Security
API Key Protection
- Never publish your API key in public repositories - Keep it secure and private
- Configure referrer settings properly - This is your primary defense against unauthorized usage
- Immediately regenerate the key if compromised - Better safe than sorry
- Monitor usage regularly - Check for unexpected traffic or usage patterns
Referrer-Based Security System
Jodit Cloud uses a robust referrer-based security system to protect your API key:
- No direct access allowed - You cannot simply open the script URL in a browser
- Referrer header validation - Every request must come from an authorized domain
- Automatic blocking - Unauthorized requests receive a 403 Forbidden response
- Real-time protection - Security checks happen on every request
This means that even if someone discovers your API key, they cannot use it without being on an authorized domain. The system will automatically block any unauthorized attempts to load the editor.
Why This Matters
Without referrer protection, your API key would be vulnerable to:
- Bandwidth theft - Others using your quota and resources
- License violations - Unauthorized usage affecting your license limits
- Performance impact - Unexpected load from unauthorized domains
- Cost implications - Potential overage charges from excessive usage
The referrer system ensures that only YOU can use your API key on YOUR authorized domains.
Usage Examples
React Component
import React, { useEffect, useRef } from 'react';
const JoditEditor = ({ value, onChange, apiKey }) => {
const textareaRef = useRef(null);
const editorRef = useRef(null);
useEffect(() => {
// Dynamic script loading
const script = document.createElement('script');
script.src = `https://cloud.xdsoft.net/v4/jodit-pro/?key=${apiKey}`;
script.onload = () => {
window.JoditLoader.ready().then(() => {
editorRef.current = window.Jodit.make(textareaRef.current, {
events: {
change: newValue => onChange?.(newValue)
}
});
if (value) {
editorRef.current.value = value;
}
});
};
document.head.appendChild(script);
return () => {
if (editorRef.current) {
editorRef.current.destruct();
}
document.head.removeChild(script);
};
}, [apiKey]);
return <textarea ref={textareaRef} defaultValue={value} />;
};
Copy
Vue.js Component
<template>
<textarea ref="textarea" :value="modelValue"></textarea>
</template>
<script>
export default {
props: ['modelValue', 'apiKey'],
mounted() {
this.loadJodit();
},
beforeUnmount() {
if (this.editor) {
this.editor.destruct();
}
},
methods: {
async loadJodit() {
// Script loading
const script = document.createElement('script');
script.src = `https://cloud.xdsoft.net/v4/jodit-pro/?key=${this.apiKey}`;
await new Promise(resolve => {
script.onload = resolve;
document.head.appendChild(script);
});
// Editor initialization
await window.JoditLoader.ready();
this.editor = window.Jodit.make(this.$refs.textarea, {
events: {
change: value => {
this.$emit('update:modelValue', value);
}
}
});
}
}
};
</script>
Copy
Support and Debugging
Loading Verification
Make sure the script loads correctly:
// Check in browser console
console.log('JoditLoader available:', typeof JoditLoader !== 'undefined');
console.log('Jodit available:', typeof Jodit !== 'undefined');
Copy
Error Handling
JoditLoader.ready()
.then(() => {
try {
const editor = Jodit.make('#editor');
console.log('Editor successfully initialized');
} catch (error) {
console.error('Editor initialization error:', error);
}
})
.catch(error => {
console.error('Jodit loading error:', error);
});
Copy
Common Issues
- API key not working - Check referrer settings in your account dashboard
- Script not loading - Make sure the API key is specified correctly
- Version conflicts - Check that no other version of Jodit is loaded
API Reference
URL Parameters
The script supports the following parameters:
https://cloud.xdsoft.net/v4/jodit-pro/?key=YOUR_API_KEY&callback=myCallback&version=4.0.1
key - Your API key (required)callback - JSONP callback function (optional)version - Specific version to load (overrides settings)
Loading Events
// Track loading progress
JoditLoader.on('progress', percent => {
console.log(`Loaded: ${percent}%`);
});
JoditLoader.on('ready', () => {
console.log('Jodit ready to use');
});
JoditLoader.on('error', error => {
console.error('Loading error:', error);
});
Copy
Migration from Local Installation
If you're migrating from a local Jodit PRO installation to the Cloud version:
- Remove local Jodit files from your project
- Replace
<script src="jodit.min.js"></script> with <script src="https://cloud.xdsoft.net/v4/jodit-pro/?key=YOUR_API_KEY"></script>
- Wrap initialization code in
JoditLoader.ready().then(() => { ... })
- Configure referrers in your account dashboard
License Management
License Duration by Product Type
Your cloud license duration depends on the product you purchase:
- Jodit Cloud: 1 month per purchase
- Jodit PRO: 3 months per purchase
- Jodit Multi: 3 months per purchase
- Jodit OEM: 12 months per purchase
Automatic License Extension
When you purchase additional licenses:
- If your current license hasn't expired: New time is added to your existing expiration date
- If your current license has expired: New time starts from the purchase date
- Multiple purchases: Each purchase extends your total license time
Example: If you have 10 days left on your cloud license and purchase another month, you'll have 40 days total (10 + 30).
Trial Keys
For testing purposes, you can create a 7-day trial key:
- Available for any paid license holder
- Perfect for testing cloud features before committing to regular renewals
- Trial keys are clearly marked with "TRIAL-" prefix
- Can be created from your order's Cloud Settings page
Automatic API Key Creation
Cloud API keys are created automatically when you:
- Purchase any Jodit license (not just cloud-specific ones)
- Access the Cloud Settings page for any paid order
- All license types can use cloud features with appropriate durations
License and Usage
- One API key can be used on unlimited domains (within referrer settings)
- No restrictions on number of users or editors per page
- Support for all Jodit PRO features
- Automatic updates (when using "latest" version)
- License duration varies by product type (see License Management above)
Need help? Contact support or create a ticket in the support system.