For some applications, the fully-featured ribbon bar might be too overloaded with features or the ribbon concept is not required in a project. Programmatically, all ribbon tabs, groups and buttons can be removed or modified. But this sample shows how remove the ribbon bar completely and to implement your own, custom button bar with simple toggle buttons.

The whole implementation is done using pure HTML, CSS and JavaScript. The following HTML represents the custom ribbon bar:

<div class="customButtonBar">
    <div class="ck-button">
        <label>
            <input id="bold" type="checkbox"><span><strong>Bold</strong></span>
        </label>
    </div>
    <div class="ck-button">
        <label>
            <input id="italic" type="checkbox"><span><em>Italic</em></span>
        </label>
    </div>
    <select id="fontSize">
        <option value="200">10</option>
        <option value="240">12</option>
        <option value="320">16</option>
        <option value="400">20</option>
    </select>
</div>

The following JavaScript code is used to attach a click event to the Bold button. Using a command, the TXTextControl.InputFormatProperty.Bold is set on Text Control.

// click handler for the "Bold" button
$("#bold").click(function () {
    // send command to enable/disable bold for current selection
    if ($("#bold").prop("checked"))
        TXTextControl.sendCommand(TXTextControl.Command.InputFormat,
            TXTextControl.InputFormatProperty.Bold, 1);
    else 
        TXTextControl.sendCommand(TXTextControl.Command.InputFormat,
            TXTextControl.InputFormatProperty.Bold, 0);

    TXTextControl.focus();
});

In order to update the state of the button based on the current input position, the inputFormatReceived event is used. This event is triggered, if the format at the current position has been changed (or the input position has been changed to another position with a different format):

document.addEventListener("inputFormatReceived", function (e) {
    var msg = e.detail;

    // process "Bold"
    if (msg.hasOwnProperty("Bold"))
        inputFormatChanged(TXTextControl.InputFormatProperty.Bold, msg.Bold);
});

In the event handler itself, the returned id defines the input format property. Using a switch statement, all different cases are handled. If the text at the current input position is formatted with bold, the value parameter is true and the button status is updated accordingly:

// process received format options
function inputFormatChanged(id, value, stringValue) {
    switch (id) {
        // handle the "Bold" button
        case TXTextControl.InputFormatProperty.Bold:
            if (value == true) 
                $("#bold").prop("checked", true);
            else 
                $("#bold").prop("checked", false);             
            break;       
    }
}

Download the sample from GitHub and test it on your own.