Skip to main content Skip to footer

SpreadJS Rich Text

SpreadJS provides different cell types that give the user useful functionality. Rich text formatting is something that isn’t supported out-of-the-box in SpreadJS, but a custom HTML Cell Type can be implemented that provides most of the functionality of general HTML tags inside of cells in SpreadJS. Download the source code for this tutorial: SpreadJS RichText The finished SpreadJS instance with HTML Cell Types The finished SpreadJS instance with HTML Cell Types

Set Up the Project

<!DOCTYPE html>  
<html xmlns="">  
    <title>SpreadJS Rich Text</title>  
    <!--jQuery References-->  
    <script src="" type="text/javascript"></script>  

    <link href="" rel="stylesheet" type="text/css" />  

    <script type="text/javascript" src=""></script>  

    <script type="text/javascript">  
        // Initialize SpreadJS  
        $(document).ready(function () {  
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));  
            var sheet = spread.getActiveSheet();  
    <div id="ss" style="width: 550px; height: 400px; border: 1px solid gray"></div>  

Code the Custom Cell Type

To implement rich text functionality, we are going to create a custom HTML Cell Type that uses the built-in TextCellType as a base:

function HTMLCellType() { }  
HTMLCellType.prototype = new GcSpread.Sheets.TextCellType();  

In this example, the main function we will be implementing is the paint function, since the functionality revolves around how the cell type paints. To start implementing the paint function, initialize the variable that will be used:

HTMLCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {  
    var DOMURL = window.URL || window.webkitURL || window;  
    var cell = context.sheet.getCell(context.row, context.col);  
    var img = cell.tag();  

The HTML Cell Type takes an SVG image created from XML code and sets it as the tag for the cell. The tag is then applied to the cell via the ctx variable, which is the CanvasRenderingContext. The beginning part of the paint function will check if the cell’s tag exists and then paint the SVG image in the cell:

if (img) {;  
    ctx.rect(x, y, w, h);  
    ctx.drawImage(img, x + 2, y + 2)  

The next part to implement is setting up the content to create the SVG from. In this case, use a pattern and replace specific data in it with information from the cell’s data. Then create XML from that:

var svgPattern = '<svg xmlns="" width="{0}" height="{1}">' +  
    '<foreignObject width="100%" height="100%"><div xmlns="" style="font:{2}">{3}</div></foreignObject></svg>';  

var data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value);  
var doc = document.implementation.createHTMLDocument("");  
// Get well-formed markup  
data = (new XMLSerializer()).serializeToString(doc.body.children[0]);  

The last part of the implementation is to create the image from the SVG and set it as the cell’s tag property, which will be used when painting:

img = new Image();  
img.crossOrigin = "";  
var svg = new Blob([data], {  
    type: 'image/svg+xml;charset=utf-8'  
var url = DOMURL.createObjectURL(svg);  
img.src = url;  
img.onload = function () {  
    context.sheet.repaint(new GcSpread.Sheets.Rect(x, y, w, h));  

Now that the HTML Cell Type has been implemented, we can set it with the cellType property on cells in the sheet, and specify the value as HTML code:

$(document).ready(function () {  
    var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));  
    var sheet = spread.getActiveSheet();  
    sheet.getCell(0, 0).cellType(new HTMLCellType()).value('<sup>Supercript</sup>Test<sub>Subscript</sub>');  
    sheet.getCell(0, 1).cellType(new HTMLCellType()).value('<font color="#FF0000">Red Text</font>');  
    sheet.getCell(0, 2).cellType(new HTMLCellType()).value('<font style="font-family:courier;">Courier Font</font>');  
    sheet.getCell(0, 3).cellType(new HTMLCellType()).value('<strong>Bold Text</strong>');  
    sheet.getCell(1, 0).cellType(new HTMLCellType()).value('<h1>Heading</h1>');  

This will show the resulting HTML inside the cells as if it was just running on the page, and the user can edit the actual HTML code by entering edit mode on the cells. The HTML Cell Type in Edit Mode The HTML Cell Type in Edit Mode.


comments powered by Disqus