Modern WYSIWYG Editor
for the Web HTML

Bloomeditor is a powerful, lightweight, and customizable rich text editor that integrates seamlessly into any web application.

Start Free Trial View Documentation

Try Bloom Editor Live

Experience the next-generation WYSIWYG editor right in your browser. Edit, style, and explore Bloomeditor’s capabilities instantly.

Powerful Features

Everything you need to create rich content experiences

Rich Text Editing

Full formatting options including bold, italic, underline, fonts, colors, and more with intuitive controls.

Media Management

Easily insert and manage images, videos, and other media with drag-and-drop functionality.

Table Editor

Create and customize tables with inline editing tools for rows, columns, and cell formatting.

Code Editor

Switch between WYSIWYG and source code views with syntax highlighting for developers.

Responsive Design

Fully responsive interface that works perfectly on desktop, tablet, and mobile devices.

Customizable

Extensive theming options and plugin system to match your brand and extend functionality.

Documentation

Learn how to integrate and customize Bloom Editor for your projects

Contents

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.

Ready to Get Started?

Join thousands of developers who use Bloomeditor to create amazing content experiences.

Start Free Trial View Documentation