Configuration system for @editorjs/image providing comprehensive setup options for endpoints, custom upload handlers, UI customization, and feature toggles.
Essential configuration for integrating ImageTool with Editor.js, including upload endpoints and field configuration.
interface ImageConfig {
/** Upload endpoint URLs for file and URL upload methods */
endpoints?: {
/** Endpoint URL for file uploads via multipart/form-data */
byFile?: string;
/** Endpoint URL for URL-based uploads via application/json */
byUrl?: string;
};
/** Form field name for uploaded files (default: 'image') */
field?: string;
/** Accepted MIME types for file selection (default: 'image/*') */
types?: string;
/** Placeholder text for caption input (default: 'Caption') */
captionPlaceholder?: string;
/** Custom HTML content for file selection button */
buttonContent?: string;
/** Additional data to include in upload requests */
additionalRequestData?: object;
/** Additional HTTP headers to include in upload requests */
additionalRequestHeaders?: object;
/** Custom upload handler functions */
uploader?: {
/** Custom file upload handler returning upload response promise */
uploadByFile?: (file: Blob) => Promise<UploadResponseFormat>;
/** Custom URL upload handler returning upload response promise */
uploadByUrl?: (url: string) => Promise<UploadResponseFormat>;
};
/** Custom action configurations for settings menu */
actions?: ActionConfig[];
/** Feature toggle configuration for built-in tunes */
features?: FeaturesConfig;
}Usage Examples:
import ImageTool from '@editorjs/image';
// Basic endpoint configuration
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile',
byUrl: 'http://localhost:8008/fetchUrl',
}
}
}
}
});
// With additional configuration
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: {
byFile: '/api/upload',
byUrl: '/api/upload-url'
},
field: 'image',
types: 'image/*,video/mp4',
captionPlaceholder: 'Enter image description...',
additionalRequestData: {
userId: 123,
project: 'my-project'
},
additionalRequestHeaders: {
'Authorization': 'Bearer token',
'X-API-Key': 'api-key'
}
}
}
}
});Advanced configuration allowing complete customization of upload behavior with custom handlers for file and URL uploads.
interface UploadResponseFormat<AdditionalFileData = {}> {
success: number;
file: {
url: string;
} & AdditionalFileData;
}Usage Examples:
// Custom upload handlers
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
uploader: {
uploadByFile: async (file) => {
const formData = new FormData();
formData.append('file', file);
const response = await fetch('/custom-upload', {
method: 'POST',
body: formData,
headers: {
'Authorization': 'Bearer ' + getAuthToken()
}
});
const result = await response.json();
return {
success: result.success ? 1 : 0,
file: {
url: result.fileUrl,
size: result.fileSize,
name: result.fileName
}
};
},
uploadByUrl: async (url) => {
const response = await fetch('/upload-by-url', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + getAuthToken()
},
body: JSON.stringify({ url })
});
const result = await response.json();
return {
success: result.success ? 1 : 0,
file: {
url: result.processedUrl,
originalUrl: url,
dimensions: result.dimensions
}
};
}
}
}
}
}
});Control which features and tunes are available to users, allowing fine-grained customization of the tool's capabilities.
interface FeaturesConfig {
background?: boolean;
border?: boolean;
caption?: boolean | 'optional';
stretch?: boolean;
}Usage Examples:
// Disable specific features
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
features: {
border: false, // Disable border tune
background: false, // Disable background tune
stretch: true, // Keep stretch tune
caption: 'optional' // Make caption optional (user can toggle)
}
}
}
}
});
// Minimal feature set
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
features: {
border: false,
background: false,
stretch: false,
caption: false // No caption functionality
}
}
}
}
});Extend the tool with custom actions that appear in the settings menu alongside built-in tunes.
interface ActionConfig {
name: string;
icon: string;
title: string;
toggle?: boolean;
action?: Function;
}Usage Examples:
// Adding custom actions
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
actions: [
{
name: 'grayscale',
icon: '<svg>...</svg>',
title: 'Convert to Grayscale',
toggle: true,
action: (actionName) => {
console.log(`Custom action triggered: ${actionName}`);
// Custom grayscale logic here
}
},
{
name: 'crop',
icon: '<svg>...</svg>',
title: 'Crop Image',
action: (actionName) => {
// Open custom crop interface
openCropModal();
}
}
]
}
}
}
});Configure accepted file types and upload field names for fine-tuned control over file handling.
Usage Examples:
// Specific file types
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
types: 'image/jpeg,image/png,image/gif,image/webp',
field: 'upload_file'
}
}
}
});
// Include video support
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
types: 'image/*,video/mp4,video/webm',
field: 'media_file'
}
}
}
});Customize the user interface elements including button content and placeholder text.
Usage Examples:
// Custom UI text
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
captionPlaceholder: 'Describe this image...',
buttonContent: `
<svg>...</svg>
Choose Image
`
}
}
}
});
// Internationalization
const editor = new EditorJS({
tools: {
image: {
class: ImageTool,
config: {
endpoints: { /* ... */ },
captionPlaceholder: i18n.t('image.caption.placeholder'),
buttonContent: `
<svg>...</svg>
${i18n.t('image.button.select')}
`
}
}
}
});