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.

ASP.NET MVC: Implementing a simplistic, custom button bar

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>
view raw test.htm hosted with ❤ by GitHub

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();
});
view raw test.js hosted with ❤ by GitHub

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);
});
view raw test.js hosted with ❤ by GitHub

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;
}
}
view raw test.js hosted with ❤ by GitHub

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