Syncfusion AI Assistant

How can I help you?

Appearance in EJ2 JavaScript Block Editor control

15 Dec 202514 minutes to read

The Block Editor control provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.

Setting width and height

You can specify the width and height for the Block Editor control using the width and height properties.

const editor = new BlockEditor({
    width: '100%',
    height: '80vh'
});

// Or with specific pixel values
const editor = new BlockEditor({
    width: '800px',
    height: '500px'
});

Setting readonly mode

You can utilize the readOnly property to control whether the editor is in read-only mode. When set to true, users cannot edit the content but can still view it.

const editor = new BlockEditor({
    readOnly: true
});

Customization using CSS Class

You can use the cssClass property to customize the appearance of the Block Editor control.

const editor = new BlockEditor({
    width: '600px',
    height: '400px',
    cssClass: 'custom-editor-theme'
});

The following example demonstrates the usage of readOnly and cssClass properties of the Block Editor.

var blockData = [
    {
        blockType: 'Heading',
        properties: { level: 1 },
        content: [
            {
                contentType: ej.blockeditor.ContentType.Text,
                content: 'Appearance Configuration Demo'
            }
        ]
    },
    {
        blockType: 'Paragraph',
        content: [
            {
                contentType: ej.blockeditor.ContentType.Text,
                content: 'This demo showcases different appearance configurations including readonly mode and a custom CSS theme.'
            }
        ]
    },
    {
        blockType: 'Heading',
        properties: { level: 2 },
        content: [
            {
                contentType: ej.blockeditor.ContentType.Text,
                content: 'Configured Custom Theme'
            }
        ]
    },  
    {
        blockType: 'BulletList',
        content: [
            {
                contentType: ej.blockeditor.ContentType.Text,
                content: 'Gradient background with modern styling'
            }
        ]
    },
    {
        blockType: 'Paragraph',
        content: [
            {
                contentType: ej.blockeditor.ContentType.Text,
                content: 'Use the readonly toggle to switch between editable and read-only modes. In readonly mode, you can view content but cannot make changes.'
            }
        ]
    }
];

var blockEditor = new ej.blockeditor.BlockEditor({
    blocks: blockData,
});

blockEditor.appendTo('#blockeditor');

// Track current state
var isReadonly = false;
var currentTheme = 'default';

// Toggle Readonly Mode
(document.getElementById('toggleReadonlyBtn')).addEventListener('click', () => {
    isReadonly = !isReadonly;
    blockEditor.readOnly = isReadonly;

    // Add visual indication for readonly mode
    var editorElement = document.getElementById('blockeditor');
    if (editorElement) {
        if (isReadonly) {
            editorElement.classList.add('readonly-mode');
        } else {
            editorElement.classList.remove('readonly-mode');
        }
    }

    updateStatus();
    displayOutput(`Readonly mode ${isReadonly ? 'enabled' : 'disabled'}. ${isReadonly ? 'Content is now view-only.' : 'Content is now editable.'}`);
});

// Apply Custom Theme
(document.getElementById('applyCustomThemeBtn')).addEventListener('click', () => {
    blockEditor.cssClass = 'custom-theme';
    currentTheme = 'custom';
    updateStatus();
    displayOutput('Custom theme applied. The editor now features a gradient background with modern styling and hover effects.');
});

// Add event listeners for editor interactions
blockEditor.focus = function() {
    displayOutput('Editor focused. You can now type or edit content.');
};

blockEditor.blur = function() {
    displayOutput('Editor lost focus.');
};

// Initialize status display
updateStatus();

// Output helper function
function displayOutput(message) {
    var outputDiv = document.getElementById('output');
    if (outputDiv) {
        outputDiv.textContent = message;
    }
}

// Update status display
function updateStatus() {
    var statusText = document.getElementById('statusText');
    if (statusText) {
        var mode = isReadonly ? 'Readonly' : 'Editable';
        var theme = currentTheme.charAt(0).toUpperCase() + currentTheme.slice(1);
        statusText.textContent = `${mode}, ${theme} Theme`;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - BlockEditor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet"/>
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-blockeditor/styles/tailwind3.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="blockeditor"></div>
        <div id="controls">
            <h3>Appearance Configuration Demo</h3>
            <div class="button-group">
                <button id="toggleReadonlyBtn">Toggle Readonly Mode</button>
                <button id="applyCustomThemeBtn">Apply Custom Theme</button>
            </div>
            <div class="status-info">
                <p><strong>Current Status:</strong> <span id="statusText">Editable, Default Theme</span></p>
            </div>
        </div>
        <div id="output"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <style>
        #container {
            margin: 50px;
            gap: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#controls {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f9fa;
}

.button-group {
    margin-bottom: 15px;
}

.button-group button {
    margin: 5px;
    padding: 8px 16px;
    background-color: #17a2b8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button-group button:hover {
    background-color: #138496;
}

.status-info {
    padding: 10px;
    background-color: #d1ecf1;
    border-left: 4px solid #17a2b8;
    border-radius: 4px;
}

.status-info p {
    margin: 0;
    color: #0c5460;
}

#output {
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    min-height: 50px;
    font-family: monospace;
    white-space: pre-wrap;
}

/* Custom Theme CSS Class */
.custom-theme {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
}

.custom-theme .e-block {
    border-radius: 8px;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
}

.custom-theme .e-block:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.custom-theme .e-block-content, .custom-theme .e-floating-icon {
    color: #fff;
    font-weight: 500;
}

/* Readonly Mode Styling */
.readonly-mode {
    opacity: 0.8;
    cursor: not-allowed;
}

.readonly-mode .e-block-content {
    color: #6c757d;
}

.custom-theme.readonly-mode .e-block-content {
    color: #101111;
}