All docs
V21.1
21.2 (EAP/Beta)
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.

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;
        }
    }
};