CommaJS - Documentation

This utility is the toolbar used by our commajs package. If you are already using commajs package, you can skip to the configuration paragraph.

Again, this utility is already included only in our commajs package.

npm install commajs-toolbar

The toolbar is styled using the css file that you can find in the package. It also requires Font Awesome 4.

import CommaToolbar from "commajs-toolbar";

const toolbar = new CommaToolbar(commajsEditorInstance, '#idToolbarContainer', toolbarOptions);

toolbarOptions is an object containing the toolbar's configuration

As always, an example is better than 200 words:

const toolbarOptions = {
        buttons: "all",
        onUploadFiles: (files) => { },
        fontFamilies: [{
            label: "Times New Roman",
            value: "'Times New Roman', Times, serif"
        },{
            label: "Arial",
            value: "Arial, Helvetica, sans-serif"
        }],
        fontSizes: [{
            label: "Big",
            value: "20rem"
        },{
            label: "20px",
            value: "20px"
        }]
    }

All available options:

buttons

not required, default: all

Used to select which buttons should appear on the bar. It can assume one of the following values:

'all' - Shows all buttons

'mini' - Shows most common buttons

Alternatively, you can set buttons equal to an array. The array can contain any combination of the following:

const ALL_BUTTONS = [
    "separator", //vertical bar to group buttons
    "outline", 
    "bold", 
    "italic",
    "underlined",
    "strike",
    "fontSize",   //see fontFamilies below
    "fontFamily", //see fontSizes below
    "fontColor",
    "backgroundColor",
    "align-left",
    "align-center",
    "align-right",
    "align-justify",
    "indent",
    "dedent",
    "numbered-list",
    "list",
    "horizontal-rule",
    "table",
    "spreadsheet",
    "superscript",
    "subscript",
    "links",
    "tasks",
    "multi-columns",
    "stickynotes",
    "fileUpload" //requires onUploadFiles option specified
]

In the array you also can include an object to add custom buttons to the toolbar, for example:

.buttons = ["bold", "underlined", "separator", { 
    title: "Custom Button", //HTML title prop
    faIcon: "fa-cogs", //font awesome 4 icon
    onClick: (e) => {
        //e = HTML click event
    }
}]

onUploadFiles

type: function, required only if buttons = "all" or includes button 'fileUpload'

onUploadFiles option must be a function, for example:

const onUploadFunction =  = (files) => { 
        //you will probably need to do something like:
        /*
        files.forEach(file => {
            if(file.type!="directory") {
                const formData = new FormData();
                formData.append('myFile', file);
    
                fetch('....../uploadFile', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    return response.json();
                })
                .then(data => {
                    let fileName = data.fileName;
    
                    .... 
                    
                    if(GetFileType(fileName) == "image" ) {
                        commaEditor.InsertPluginAtSection(CommaJS.GetPluginImageName(), {link: "........../uploads/"+fileName});
                    } else if(GetFileType(fileName) == "video" ) {
                        commaEditor.InsertPluginAtSection(CommaJS.GetPluginVideoName(), {link: "........../uploads/"+fileName, mimeType: "video/"+fileExtension});
                    } else {
                        console.log("not supported");
                    }
    
                })
                .catch(error => {
                    console.error(error);
                });
            }
        });  
        */    
    }

fontFamilies

type: array, not required, default: see below

Used to specify which font families a user can select from. fontFamilies accepts an array of objects defined as:

{ 
    label: "Times New Roman", 
    value: "'Times New Roman', Times, serif"
}

If undefined, the toolbar will use the following list of web safe fonts:

    [{
        label: "Times New Roman",
        value: "'Times New Roman'"
    },{
        label: "Georgia",
        value: "Georgia"
    },{
        label: "Palatino",
        value: "Palatino"
    },{
        label: "Arial Black",
        value: "'Arial Black'"
    },{
        label: "Comic Sans MS",
        value: "Comic Sans MS"
    },{
        label: "Lucida Sans Unicode",
        value: "'Lucida Sans Unicode'"
    },{
        label: "Tahoma",
        value: "Tahoma"
    },{
        label: "Trebuchet MS",
        value: "'Trebuchet MS'"
    },{
        label: "Verdana",
        value: "Verdana"
    },{
        label: "Courier New",
        value: "'Courier New'"
    },{
        label: "Lucida Console",
        value: "'Lucida Console'"
    }]

fontSizes

type: array, not required, default: see below

Used to specify which font size a user can select from. fontSizes accepts an array of objects defined as:

{ 
    label: "Big", 
    value: "60px"
}

If undefined, the toolbar will use:

    [{
        label: "10px",
		value: "10px"
    },{
        label: "12px",
        value: "12px"
    },{
        label: "14px",
        value: "14px"
    },{
        label: "16px",
        value: "16px"
    },{
        label: "18px",
        value: "18px"
    },{
        label: "20px",
        value: "20px"
    },{
        label: "22px",
        value: "22px"
    },{
        label: "26px",
        value: "26px"
    },{
        label: "30px",
        value: "30px"
    },{
        label: "36px",
        value: "36px"
    },{
        label: "50px",
        value: "50px"
    },{
        label: "80px",
        value: "80px"
    }]