The online demo Simple implements some features based on the newly available API of Web.TextControl. It shows 3 typical tasks:

  • Remove the Save As... menu item
  • Attach event handlers to ribbon items, stop the event bubbling and show alert boxes
  • Manipulate the out-of-the-box jQueryUI dialog boxes

Removing Ribbon Items

The first task can be easily realized using CSS:

<style>
    #fileMnuItemSaveAs {
        display: none !important;
    }
</style>

Each element including ribbon tabs, groups and items have specific CSS class names which can be customized. In this case, the display property is set to none to hide the element completely.

Attaching Events and Handle Event Bubbling

To achieve the second task, we need to trap an event from Web.TextControl that is raised when the ribbon bar is completely loaded. Otherwise, elements of the ribbon bar cannot be manipulated in the DOM.

TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
    attachEvents();
});

In the function attachEvents, click events are attached to the menu item Open and Save. When clicking Open, the function waitForFileOpenDialog is called.

function attachEvents() {

    // attach click event handler to 'load' button
    document.getElementById("fileMnuItemOpen").addEventListener("click",
        function (e) {
            waitForFileOpenDialog();
    });

    // [...]
}

Manipulating JQueryUI Dialog Boxes

The function waitForFileOpenDialog is a recursive function that is basically waiting (looping) until the DOM element txOFDSelFileType exists. This element is the File Type selection drop down box in the Open File dialog box from Web.TextControl:

File Types

The idea is to wait until the element is available in order to pre-select another file type (All Files (*.*)). The function reorderListView sets the selectedIndex property to 0 in order to raise a change event to update the file list:

// wait until the file open dialog is opened
function waitForFileOpenDialog() {
    var checkExist = setInterval(function () {
        if (document.getElementById("txOFDSelFileType") != null) {
            clearInterval(checkExist);
            reorderListView()
        }
    }, 100);
}

// select 'All Files' and fire the Change event to update the file list
function reorderListView() {
    setTimeout(function () {
        document.getElementById("txOFDSelFileType").selectedIndex = 0;
        fireEvent(document.getElementById("txOFDSelFileType"), "change");
        }, 300);
}
Event bubbling

When clicking Save, a jQueryUI alert message dialog is shown and the event bubbling is canceled.

The newly attached event is raised before it is bubbled to Web.TextControl. This allows you to cancel the default functionality of a ribbon item in order to add your own action such as opening an alert message box:

// this function attaches events after the ribbon has been loaded completely
function attachEvents() {

    // [...]

    // attach click event handler to 'save' button, show an alert
    // message box and stop the bubbling of the click event to Web.TextControl
    document.getElementById("fileMnuItemSave").addEventListener("click",
        function (e) {
            jQueryAlert("TX Text Control", "Alert message");
            e.cancelBubble = true;
    });
}

Web.TextControl uses jQueryUI for all dialogs including message boxes. In order to use the above code, jQuery and jQueryUI must be referenced:

<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script
 src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>

If no other jQueryUI CSS is defined, the TX Text Control dialog style will be used automatically:

jQueryUI dialog

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