Documentation

Getting Started

Integrating Bloom Editor into your project is simple. Follow these steps to get started:

1. Include the Script

Add the Bloom Editor script to your HTML file:

<!-- Include Bloom Editor from CDN -->
<script src="https://bloomeditor.com/editor/API_KEY/editor.js"></script>

<!-- Optional: Include Boxicons for icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

2. Create HTML Element

Create a textarea or div where you want the editor:

<!-- Using textarea -->
<textarea id="myEditor">
    <h1>Welcome to Bloom Editor</h1>
    <p>Your initial content here...</p>
</textarea>

<!-- Or using div -->
<div id="myEditor">
    <h1>Welcome to Bloom Editor</h1>
    <p>Your initial content here...</p>
</div>

3. Initialize the Editor

Initialize Bloom Editor with your configuration:

// Initialize with basic configuration
const editor = BloomEditor.init({
  selector: '#myEditor',
  toolbar: ['bold', 'italic', 'heading', 'image', 'table', 'code'],
  height: '500px',
  theme: 'light'
});

Configuration Options

Bloom Editor offers extensive configuration options to customize the editor behavior and appearance.

Option	Type	Default	Description
selector	String	'.bloom_editor'	CSS selector for the editor element
theme	String	'light'	Editor theme: 'light' or 'dark'
height	String	'500px'	Editor height (CSS value)
minHeight	String	'350px'	Minimum editor height
autosave	Number	0	Autosave interval in seconds (0 = disabled)
placeholder	String	'Start typing here...'	Placeholder text for empty editor
toolbar	Array	[...]	Array of toolbar buttons
utilityToolbar	Array	[...]	Additional utility tools
uploadImageUrl	String	null	Server endpoint for image uploads
uploadImageHeaders	Object	{}	Headers for image upload requests
uploadMediaUrl	String	null	Server endpoint for media uploads
uploadMediaHeaders	Object	{}	Headers for media upload requests

Toolbar Options

Customize the toolbar with these available options:

Basic Formatting

undo Undo
redo Redo
bold Bold
italic Italic
underline Underline
strike Strikethrough
heading Heading Styles
fontFamily Font Family
fontSize Font Size

Media & Advanced

image Insert Image
media Insert Media
table Insert Table
math Math Formulas
code Source Code
link Insert Link
fullscreen Fullscreen
theme Toggle Theme
more More Tools

Example Toolbar Configuration

toolbar: [
  'undo', 'redo', 'sep',
  'heading', 'fontFamily', 'fontSize', 'sep',
  'bold', 'italic', 'underline', 'strike', 'sep',
  'foreColor', 'backColor', 'sep',
  'justifyleft', 'justifycenter', 'justifyright', 'sep',
  'outdent', 'indent', 'sep',
  'bullist', 'numlist', 'sep',
  'link', 'image', 'media', 'table', 'math', 'sep',
  'code', 'fullscreen', 'theme', 'more'
]

API Reference

Global Methods

BloomEditor.init(options)

Creates and initializes a new Bloom Editor instance.

const editor = BloomEditor.init({
  selector: '#editor',
  toolbar: ['bold', 'italic', 'link']
});

BloomEditor.getContent(selector)

Gets the HTML content from an editor instance.

const content = BloomEditor.getContent('#editor');
console.log(content);

BloomEditor.setContent(selector, content)

Sets the HTML content of an editor instance.

BloomEditor.setContent('#editor', '<h1>New Content</h1>');

BloomEditor.destroy()

Destroys all editor instances and cleans up.

BloomEditor.destroy();

File Upload Configuration

Bloom Editor supports server-side file uploads for images and media with customizable headers.

Image Upload Example

const editor = BloomEditor.init({
  selector: '#editor',
  uploadImageUrl: '/api/upload/image',
  uploadImageHeaders: {
    'Authorization': 'Bearer your-token-here',
    'X-Requested-With': 'XMLHttpRequest'
  },
  uploadMediaUrl: '/api/upload/media',
  uploadMediaHeaders: {
    'Authorization': 'Bearer your-token-here',
    'X-CSRF-TOKEN': 'your-csrf-token'
  }
});

Custom Upload Callback

For more control, you can use custom upload callbacks:

const editor = BloomEditor.init({
  selector: '#editor',
  uploadImageCallback: function(file, resolve, reject) {
    // Your custom upload logic here
    // Call resolve(url) on success or reject(error) on failure
    const formData = new FormData();
    formData.append('image', file);
    
    fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => resolve(data.url))
    .catch(error => reject(error));
  }
});

Server Response Format

Your server should respond with a JSON object containing the URL of the uploaded file:

{
  "url": "https://example.com/uploads/image.jpg",
  "path": "/uploads/image.jpg",
  "success": true
}

Examples

Basic Editor

// Minimal configuration
BloomEditor.init({
  selector: '#basicEditor',
  toolbar: ['bold', 'italic', 'underline', 'link', 'image']
});

Full Featured Editor

// Complete feature set
BloomEditor.init({
  selector: '#fullEditor',
  toolbar: [
    'undo', 'redo', 'heading', 'bold', 'italic', 'underline',
    'foreColor', 'backColor', 'link', 'image', 'table', 'math',
    'code', 'fullscreen'
  ],
  height: '600px',
  theme: 'dark',
  autosave: 30
});

Custom Toolbar

// Custom toolbar layout
BloomEditor.init({
  selector: '#customEditor',
  toolbar: [
    'bold', 'italic', 'sep',
    'bullist', 'numlist', 'sep',
    'link', 'image', 'table', 'sep',
    'code', 'fullscreen'
  ],
  utilityToolbar: ['removeFormat', 'search']
});

Frequently Asked Questions

How do I get the editor content?

Use BloomEditor.getContent('#editor') to retrieve the HTML content.

Can I use Bloom Editor with React/Vue/Angular?

Yes! Bloom Editor is framework-agnostic. Initialize it in your component's mounted lifecycle hook.

How do I customize the toolbar?

Pass a custom toolbar array in the configuration options.

Is Bloom Editor mobile-friendly?

Yes, Bloom Editor is fully responsive and works great on mobile devices.

How do I enable file uploads?

Configure uploadImageUrl and uploadMediaUrl options with your server endpoints.