Telerik UI for Windows 8 HTML

This article will show you how to set up RadRadialMenu, so that you can use it to style text in an editable container.

The most straightforward way to enable text editing in a Windows Store application using HTML/JavaScript is to use the contenteditable attribute of HTML elements. It makes the text inside it editable, so the user can apply settings like font size, font color, text highlighting, etc. Combining this behavior with a properly set RadRadialMenu results in a solution that can replace simple text editors. With further customization, you can get behavior and functionality similar to the Microsoft OneNote radial menu.

Figure 1 below shows the radial menu that you can implement by following the steps provided in this help article.

Figure 1: Text Editing RadRadialMenu Implementation
radialmenu-howto-text-edit

To implement a text editing RadRadialMenu:

  1. Define the editable text container. You can declare a regular div element and set its contenteditable attribute to true.

    Code Listing 1: Define the Editable Text Area Copy imageCopy
    <div id="target1" contenteditable="true">
        Telerik is a market-leading provider of end-to-end solutions for application development, software testing, 
        agile project management, reporting, and content management across all major development platforms. Telerik's 
        award-winning software development products enable enterprises and organizations of every size to generate 
        tangible productivity gains, reduce time-to-market, and stay on time and under budget. With tens of thousands 
        of users in more than 90 countries around the world, Telerik’s customers include numerous Fortune 2000 
        companies, academic institutions, governments, and non-profit organizations.
    </div>
  2. Define the RadRadialMenu. You can declare all items in mark-up. Set the item ids to the full text commands, so you can easily use them in JavaScript to trigger the various commands. When an item needs to be switched between selected and deselected states, you can use the selectable property along with selection groups to achieve this result. For more information on implementing different selection scenarios, check Selecting Items.

    Code Listing 2: Declare RadRadialMenu Copy imageCopy
    <div id="radialMenu1" data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
                target: '#target1',
                visible: false,
                items: [{
                        id: 'FontName',
                        text: 'Font Name',
                        icon: '\uE185',
                        items: [
                            {id: 'Arial', text: 'Arial', style: {font: '10pt Arial'}},
                            {id: 'Calibri', text: 'Calibri', style: {font: '12pt Calibri'}},
                            {id: 'Cambria', text: 'Cambria', style: {font: '12pt Cambria'}},
                            {id: 'Comic Sans', text: 'Comic Sans', style: {font: '12pt Comic sans'}},
                            {id: 'Consolas', text: 'Consolas', style: {font: '11pt Consolas'}},
                            {id: 'Segoe UI', text: 'Segoe UI', style: {font: '10pt Segoe UI'}},
                            {id: 'Times', text: 'Times', style: {font: '12pt Times'}},
                            {id: 'Verdana', text: 'Verdana', style: {font: '10pt Verdana'}}
                        ]
                    },
                    {
                        id: 'FontSize',
                        text: 'Font Size',
                        icon: '\uE1C8',
                        items: [
                            {id: '1', text: 'xx-small', style: {font: '12pt Segoe UI'}},
                            {id: '2', text: 'x-small', style: {font: '12pt Segoe UI'}},
                            {id: '3', text: 'small', style: {font: '12pt Segoe UI'}},
                            {id: '4', text: 'medium', style: {font: '12pt Segoe UI'}},
                            {id: '5', text: 'large', style: {font: '12pt Segoe UI'}}
                        ]
                    },
                    {
                        id: 'FontColor',
                        text: 'Font Color',
                        icon: '\uE186',
                        items: [
                            {id: 'Orange', style: {background: 'Orange'}},
                            {id: 'Purple',style: {background: 'Purple'}},
                            {id: 'Lightgreen', style: {background: 'Lightgreen'}},
                            {id: 'Teal', style: {background: 'Teal'}},
                            {id: 'Red', style: {background: 'Red'}}
                        ]
                    },
                    {
                        id: 'BackColor',
                        text: 'Back Color',
                        icon: '\uE193',
                        items: [
                            {id: 'Orange', style: {background: 'Orange'}},
                            {id: 'Purple',style: {background: 'Purple'}},
                            {id: 'Lightgreen', style: {background: 'Lightgreen'}},
                            {id: 'Teal', style: {background: 'Teal'}},
                            {id: 'Red', style: {background: 'Red'}}
                        ]
                    },
                     {
                        id: 'Bold',
                        text: 'Bold',
                        icon: '\uE19B',
                        selectable: true
                    },
                     {
                        id: 'Italic',
                        text: 'Italic',
                        icon: '\uE199',
                        selectable: true
                    },
                     {
                        id: 'Underline',
                        text: 'Underline',
                        icon: '\uE19A'
                    },
                     {
                        id: 'Justify',
                        text: 'Justify',
                        icon: '\uE1A1',
                        items: [
                            {id: 'JustifyLeft', text: 'Left', icon: '\uE1A0', selectable: true, group: 'justify'},
                            {id: 'JustifyCenter',text: 'Center', icon: '\uE1A1', selectable: true, group: 'justify'},
                            {id: 'JustifyRight', text: 'Right', icon: '\uE1A2', selectable: true, group: 'justify'}
                        ]
                    }
                ],
                onaction: Events.action,
                onexpand: Events.expand
            }">
    </div>
  3. Manage the commands. In JavaScript, handle the action event of RadRadialMenu and use the available information to determine the tapped item. Then, apply the corresponding command using the document.execCommand() method.

    Code Listing 3: Wiring the Text Edit Commands Copy imageCopy
    action: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var item = e.item;
        var action = e.item.id;
        if (item.parent) {
        //handle nested commands based on the parent item name
            switch (item.parent.id) {
                case "FontName":
                    document.execCommand("fontName", false, action);
                    break;
                case "FontSize":
                    var size = parseInt(action);
                    document.execCommand("fontSize", false, size);
                    break;
                case "FontColor":
                    document.execCommand("foreColor", false, action);
                    break;
                case "BackColor":
                    document.execCommand("backColor", false, action);
                    break;
                case "Justify":
                    document.execCommand(action, false);
                    break;
            }
        }
        else {
            switch (action) {
            //handle root level commands
                case "Bold":
                    document.execCommand("bold", false);
                    break;
                case "Italic":
                    document.execCommand("italic", false);
                    break;
                case "Underline":
                    document.execCommand("underline", false);
                    break;
            }
        }
    
    })
    
  4. Persist selected state of items. For styles like Bold and Italic, you need to persist the selected state of the corresponding menu item, based on the currently selected text. You can do this in the expand event of the RadRadialMenu control. Use the document.queryCommandState() method for this purpose as shown in Code Listing 4 below.

    Code Listing 4: Persist Items Selected State Copy imageCopy
    expand: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var menu = e.menu;
        //persist the selected state of items based on the current text selection
        menu.getItem("Bold").selected = document.queryCommandState("bold");
        menu.getItem("Italic").selected = document.queryCommandState("italic");
        menu.getItem("Underline").selected = document.queryCommandState("underline");
        menu.getItem("JustifyLeft").selected = document.queryCommandState("JustifyLeft");
        menu.getItem("JustifyRight").selected = document.queryCommandState("JustifyRight");
        menu.getItem("JustifyCenter").selected = document.queryCommandState("JustifyCenter");
    })
    

There are various other commands that you can execute using this type of set up. You can learn more about them by following the links in the See Also section below.

See Also