Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Create 'Change Image Size' ribbon items

  • 2 minutes to read

The code sample below demonstrates how to create ribbon items that are displayed when an image is selected and allow users to change the image size.

Change Image Size Item

const options = DevExpress.RichEdit.createOptions();

var changeWidthImageSizeCommandId = 'ChangeWidthImageSize';
var changeHeightImageSizeCommandId = 'ChangeHeightImageSize';
/** @type {DevExpress.RichEdit.Image} */
var selectedImage = null;
/** @type {DevExpress.RichEdit.RibbonNumberBoxItem} */
var changeWidthImageSizeItem = null;
/** @type {DevExpress.RichEdit.RibbonNumberBoxItem} */
var changeHeightImageSizeItem = null;

/** @param {DevExpress.RichEdit.RichEdit} richEdit */
function getSelectedImage(richEdit) {
    const selIntervals = richEdit.selection.intervals;
    if(selIntervals.length === 1 && selIntervals[0].length === 1) {
        var images = richEdit.selection.activeSubDocument.images.find(selIntervals);
        if(images.length == 1 && images[0].interval.start == selIntervals[0].start)
            return images[0];
    }
    return null;
}
function deleteSizeItems(ribbon) {
    var foTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.FloatingObjectsFormat);
    foTab.removeItem(changeWidthImageSizeItem.id);
    foTab.removeItem(changeHeightImageSizeItem.id);
    changeWidthImageSizeItem = null;
    changeHeightImageSizeItem = null;
}
options.events.selectionChanged = function (s, e) {
    selectedImage = getSelectedImage(s);
    if(selectedImage) {
        s.updateRibbon(function(ribbon) {
            if(changeWidthImageSizeItem)
                deleteSizeItems(ribbon);
            changeWidthImageSizeItem = new DevExpress.RichEdit.RibbonNumberBoxItem(changeWidthImageSizeCommandId, 'Image Width', { 
                step: 0.1,
                width: 110,
                format: '#0.##',
                value: richEdit.unitConverter.twipsToInches(selectedImage.actualSize.width),
            });
            changeHeightImageSizeItem = new DevExpress.RichEdit.RibbonNumberBoxItem(changeHeightImageSizeCommandId, 'Image Height', {
                step: 0.1,
                width: 110,
                format: '#0.##',
                value: richEdit.unitConverter.twipsToInches(selectedImage.actualSize.height),
            });
            var foTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.FloatingObjectsFormat);
            foTab.insertItemBefore(changeWidthImageSizeItem, DevExpress.RichEdit.FloatingObjectsFormatTabItemId.BringForwardMenu);
            foTab.insertItemBefore(changeHeightImageSizeItem, DevExpress.RichEdit.FloatingObjectsFormatTabItemId.BringForwardMenu);
        });
    }
    else {
        if(changeWidthImageSizeItem) {
            s.updateRibbon(function(ribbon) {
                deleteSizeItems(ribbon);
            });
        }
    }
};
options.events.customCommandExecuted = function(s, e) {
    switch(e.commandName) {
        case changeWidthImageSizeCommandId:
        case changeHeightImageSizeCommandId: {
            if(selectedImage) {
                var size = selectedImage.actualSize;
                if(e.commandName === changeWidthImageSizeCommandId)
                    size.width = s.unitConverter.inchesToTwips(e.parameter);
                else
                    size.height = s.unitConverter.inchesToTwips(e.parameter);
                selectedImage.actualSize = size;
            }
            break;
        }
    }
};