Change Case Plugin

A Jodit plugin that allows you to switch selected text between different cases: Title Case (first letter of each word capitalized), lowercase, or UPPERCASE.

Installation

Add "changeCase" to your Jodit editor's plugin list:

const editor = Jodit.make('#editor', {
    extraPlugins: ['changeCase']
});
Copy

Usage

The plugin adds a "Change case" button to the editor toolbar in the "font-style" group. When you click on this button, a dropdown list with three options appears:

• lowercase - converts text to lowercase
• UPPERCASE - converts text to uppercase
• Title Case - converts the first letter of each word to uppercase

Working with Selected Text

1. Select text in the editor
2. Click on the "Change case" button
3. Choose the desired case from the dropdown list

Working with the Current Element

If no text is selected, the plugin will apply the case change to the current element where the cursor is located.

Programmatic Usage

You can call the "changeCase" command programmatically:

// Convert selected text to lowercase
editor.execCommand('changeCase', null, 'lowercase');

// Convert selected text to uppercase
editor.execCommand('changeCase', null, 'uppercase');

// Convert selected text to Title Case
editor.execCommand('changeCase', null, 'title case');
Copy

Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['changeCase'],
    extraPlugins: ['changeCase']
});
Copy

Adding the Button to a Custom Toolbar

const editor = Jodit.make('#editor', {
    toolbar: {
        items: [
            'source', '|',
            'bold', 'italic', '|',
            'changeCase', '|',
            'ul', 'ol', '|',
            'font', 'fontsize', 'brush', 'paragraph', '|',
            'image', 'table', 'link', '|',
            'left', 'center', 'right', 'justify', '|',
            'undo', 'redo', '|',
            'hr', 'eraser', 'fullsize'
        ]
    },
    extraPlugins: ['changeCase']
});
Copy

Programmatically Changing Text Case

const editor = Jodit.make('#editor', {
    extraPlugins: ['changeCase']
});

// Add buttons for changing case
const container = document.createElement('div');
container.innerHTML = `
    <button id="lowercase">lowercase</button>
    <button id="uppercase">UPPERCASE</button>
    <button id="titlecase">Title Case</button>
`;
document.body.appendChild(container);

// Add event handlers
document.getElementById('lowercase').addEventListener('click', () => {
    editor.execCommand('changeCase', null, 'lowercase');
});

document.getElementById('uppercase').addEventListener('click', () => {
    editor.execCommand('changeCase', null, 'uppercase');
});

document.getElementById('titlecase').addEventListener('click', () => {
    editor.execCommand('changeCase', null, 'title case');
});
Copy

Configuration

The plugin has no additional settings and works "out of the box".