HTML Editor

JSpreadsheet data grid provides an HTML editor. This editor enables users to enter formatted content in cells. With a customizable toolbar, users can apply various fonts, sizes, colors, and text alignment.

Documentation

HTML Editor Options

Parameter	Description
`height: String`	Height of the HTML editor. `Default: '300px'`
`allowToolbar: Boolean`	Enable or disable the toolbar. `Default: true`
`toolbar: Array`	Custom toolbar configuration with formatting controls.
`placeholder: String`	Placeholder text for the HTML editor input.

Toolbar Configuration

The toolbar accepts an array of objects with the following properties:

Property	Description
`type: String`	Type of control ('select', 'button', etc.)
`width: String`	Width of the toolbar element.
`content: String`	Icon or text content for the element.
`options: Array`	Available options for select-type controls.
`render: Function`	Custom render function for displaying options.

Examples

Basic HTML Editor

This example demonstrates a basic HTML editor implementation with initial data.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet with HTML content
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [4, 4],
        data: [
            [ '<h3>Product Description</h3><p>High-quality product with <strong>excellent</strong> features.</p>' ],
            [ '<p>Standard product with <em>good</em> value for money.</p>' ],
            [ '<p>Premium product with <span style="color: blue;">special</span> characteristics.</p>' ],
        ],
        columns: [
            {
                type: 'html',
                title: 'Content',
                width: 400,
                options: {
                    height: '200px',
                    allowToolbar: true
                }
            }
        ]
    }],
});
</script>
</html>

import React, {useRef} from "react";
import {Spreadsheet, Worksheet} from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        [ '<h3>Product Description</h3><p>High-quality product with <strong>excellent</strong> features.</p>' ],
        [ '<p>Standard product with <em>good</em> value for money.</p>' ],
        [ '<p>Premium product with <span style="color: blue;">special</span> characteristics.</p>' ],
    ];
    // Columns
    const columns = [
        {
            type: 'html',
            title: 'Content',
            width: 400,
            options: {
                height: '200px',
                allowToolbar: true
            }
        }
    ];
    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} minDimensions={[4, 4]}/>
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :minDimensions="[4, 4]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            [ '<h3>Product Description</h3><p>High-quality product with <strong>excellent</strong> features.</p>' ],
            [ '<p>Standard product with <em>good</em> value for money.</p>' ],
            [ '<p>Premium product with <span style="color: blue;">special</span> characteristics.</p>' ],
        ];
        // Columns
        const columns = [
            {
                type: 'html',
                title: 'Content',
                width: 400,
                options: {
                    height: '200px',
                    allowToolbar: true
                }
            }
        ];

        return {
            data,
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [4, 4],
                data: [
                    [ '<h3>Product Description</h3><p>High-quality product with <strong>excellent</strong> features.</p>' ],
                    [ '<p>Standard product with <em>good</em> value for money.</p>' ],
                    [ '<p>Premium product with <span style="color: blue;">special</span> characteristics.</p>' ],
                ],
                columns: [
                    {
                        type: 'html',
                        title: 'Content',
                        width: 400,
                        options: {
                            height: '200px',
                            allowToolbar: true
                        }
                    }
                ]
            }]
        });
    }
}

Customized HTML Editor Toolbar

This example demonstrates how to customize the HTML toolbar with font selection, size options, and text alignment controls.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Customize the HTML editor
const options = {
    height: '140px',
    allowToolbar: true,
    toolbar: [{
        type:'select',
        width: '160px',
        options: [ 'Verdana', 'Arial', 'Courier New' ],
        bottom: true,
        render: function(e) {
            return '<span style="font-family:' + e + '">' + e + '</span>';
        },
        onchange: function(a,b,c,d) {
            document.execCommand('fontName', false, d);
        }
    },
        {
            type: 'select',
            width: '48px',
            content: 'format_size',
            options: ['X-small','Small','Medium','Large','X-large'],
            bottom: true,
            render: function(e) {
                return '<span style="font-size:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d,e) {
                document.execCommand('fontSize', false, e+1);
            }
        },
        {
            type: 'select',
            width: '50px',
            options: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
            bottom: true,
            render: function(e) {
                return '<i class="material-icons">' + e + '</i>';
            },
            onchange: function(a,b,c,d) {
                if (d == 'format_align_left') {
                    document.execCommand('justifyLeft');
                } else if (d === 'format_align_center') {
                    document.execCommand('justifyCenter');
                } else if (d === 'format_align_right') {
                    document.execCommand('justifyRight');
                } else if (d === 'format_align_justify') {
                    document.execCommand('justifyFull');
                }
            }
        }
    ]
}

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    toolbar: true,
    worksheets: [{
        minDimensions: [6,6],
        columns: [
            {
                type: 'html', options: options
            }
        ]
    }],
});
</script>
</html>

import React, {useRef} from "react";
import {Spreadsheet, Worksheet} from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Customize the HTML editor
    const options = {
        height: '140px',
        allowToolbar: true,
        toolbar: [{
            type:'select',
            width: '160px',
            options: [ 'Verdana', 'Arial', 'Courier New' ],
            bottom: true,
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d) {
                document.execCommand('fontName', false, d);
            }
        },
        {
            type: 'select',
            width: '48px',
            content: 'format_size',
            options: ['X-small','Small','Medium','Large','X-large'],
            bottom: true,
            render: function(e) {
                return '<span style="font-size:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d,e) {
                document.execCommand('fontSize', false, e+1);
            }
        },
        {
            type: 'select',
            width: '50px',
            options: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
            bottom: true,
            render: function(e) {
                return '<i class="material-icons">' + e + '</i>';
            },
            onchange: function(a,b,c,d) {
                if (d == 'format_align_left') {
                    document.execCommand('justifyLeft');
                } else if (d === 'format_align_center') {
                    document.execCommand('justifyCenter');
                } else if (d === 'format_align_right') {
                    document.execCommand('justifyRight');
                } else if (d === 'format_align_justify') {
                    document.execCommand('justifyFull');
                }
            }
        }]
    };

    // Columns
    const columns = [
        { type: 'html', options: options }
    ];

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet} tabs={true} toolbar={true}>
            <Worksheet columns={columns} minDimensions={[6, 6]}/>
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :tabs="true" :toolbar="true">
        <Worksheet :columns="columns" :minDimensions="[6, 6]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Customize the HTML editor
        const options = {
            height: '140px',
            allowToolbar: true,
            toolbar: [{
                type:'select',
                width: '160px',
                options: [ 'Verdana', 'Arial', 'Courier New' ],
                bottom: true,
                render: function(e) {
                    return '<span style="font-family:' + e + '">' + e + '</span>';
                },
                onchange: function(a,b,c,d) {
                    document.execCommand('fontName', false, d);
                }
            },
            {
                type: 'select',
                width: '48px',
                content: 'format_size',
                options: ['X-small','Small','Medium','Large','X-large'],
                bottom: true,
                render: function(e) {
                    return '<span style="font-size:' + e + '">' + e + '</span>';
                },
                onchange: function(a,b,c,d,e) {
                    document.execCommand('fontSize', false, e+1);
                }
            },
            {
                type: 'select',
                width: '50px',
                options: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
                bottom: true,
                render: function(e) {
                    return '<i class="material-icons">' + e + '</i>';
                },
                onchange: function(a,b,c,d) {
                    if (d == 'format_align_left') {
                        document.execCommand('justifyLeft');
                    } else if (d === 'format_align_center') {
                        document.execCommand('justifyCenter');
                    } else if (d === 'format_align_right') {
                        document.execCommand('justifyRight');
                    } else if (d === 'format_align_justify') {
                        document.execCommand('justifyFull');
                    }
                }
            }]
        };

        // Columns
        const columns = [
            { type: 'html', options: options }
        ];

        return {
            columns,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTlhOTc5ZGIyYjllMWFjYzUwYThkZjRhZGVhYTBkNmFkOTIzMWFkNTkyMWM0NmVjYTJiMDJjNzc3OGNmNjFjOGNlNzBhMWYwNDU4ODlkYzE4YzE4ZmVkZmI1M2U3NDJlMDE4MmVhZDVmMzBhZDBhNTk0OGU3YzdmOTEzZTA4NzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU5EZzFOak0wTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Customize the HTML editor
        const options = {
            height: '140px',
            allowToolbar: true,
            toolbar: [{
                type:'select',
                width: '160px',
                options: [ 'Verdana', 'Arial', 'Courier New' ],
                bottom: true,
                render: function(e: any) {
                    return '<span style="font-family:' + e + '">' + e + '</span>';
                },
                onchange: function(a: any,b: any,c: any,d: any) {
                    document.execCommand('fontName', false, d);
                }
            },
            {
                type: 'select',
                width: '48px',
                content: 'format_size',
                options: ['X-small','Small','Medium','Large','X-large'],
                bottom: true,
                render: function(e: any) {
                    return '<span style="font-size:' + e + '">' + e + '</span>';
                },
                onchange: function(a: any,b: any,c: any,d: any,e: any) {
                    document.execCommand('fontSize', false, e+1);
                }
            },
            {
                type: 'select',
                width: '50px',
                options: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
                bottom: true,
                render: function(e: any) {
                    return '<i class="material-icons">' + e + '</i>';
                },
                onchange: function(a: any,b: any,c: any,d: any) {
                    if (d == 'format_align_left') {
                        document.execCommand('justifyLeft');
                    } else if (d === 'format_align_center') {
                        document.execCommand('justifyCenter');
                    } else if (d === 'format_align_right') {
                        document.execCommand('justifyRight');
                    } else if (d === 'format_align_justify') {
                        document.execCommand('justifyFull');
                    }
                }
            }]
        };

        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            tabs: true,
            toolbar: true,
            worksheets: [{
                minDimensions: [6, 6],
                columns: [
                    { type: 'html', options: options }
                ]
            }]
        });
    }
}